laravel mix sassの画像が見つかりません/ハッシュ

Question

私はLaravelで初めて働いています。 5.4バージョンでは、彼らは幼虫混合を導入しました。私は静的なウェブサイトの私のSASSを貼り付けようとしました（私はこれをgulpと一緒にコンパイルします）、resourcesフォルダのsassファイルに貼り付けようとしました。これはうまくいって、私のSASSはパブリックマップのapp.cssファイルにコンパイルされます。

私には1つの主な問題があります。私が望むように、Sassファイル（リソース/アセット/イメージ）のすべてのイメージはコンパイルされません。 SASSで

コードファイル（リソース/資産/ SASS/banners.scss）は

section.module.parallax-1 { 
    background-image: url('../images/banner1.jpg'); 
} 

（app.css）

section.module.parallax-1 { 
    background-image: url(/images/banner1.jpg?ef4f135bad144d886f07c8b65f757a85); 
} 

ので、代わりのCSSへのURLをコンパイルするにはミックスでコンパイル私のSASSファイルにあるように、最後にハッシュとは別のものにコンパイルします。また、sassをコンパイルした後、私はSASSファイルで使用したイメージでイメージマップを生成します。私のイメージマップは元々リソース/アセット/イメージにあります。

私は何が間違っているのか分かりません。私は自分のSassファイルのURLを変更しようとしましたが、これは役に立たないでしょう。私を助けることができる人がいますか？それとも、他の解決策がありますか？

webpack.mixコード/ JS

const mix = require('laravel-mix'); 

mix.js('resources/assets/js/app.js', 'public/js') 
    .sass('resources/assets/sass/app.scss', 'public/css'); 

Answer 1

私は今、同じ問題がありました。私が見る限り、これは最新のlaravel mixバージョンのケースではなくなりました。そのはまだアップあなたは、次の修正プログラムを使用することができますnpmjs

ではないので、しかし：webpack.mix.jsに

を

mix.options({ 
    processCssUrls: false // Process/optimize relative stylesheet url()'s. Set to false, if you don't want them touched. 
}); 

を追加し、あなたのルートディレクトリにnode_modules/laravel_mix/setup/webpack.config.jsをコピーします。

（webpack.mix.jsがどこにあるかと同じ）

ザッツが完了したら、あなたが更新する必要が

{ loader: 'resolve-url-loader' + sourceMap },

を提出新しいwebpack.config.jsからこの文字列を検索し、削除あなたのnpmスクリプトはwebpack.config.jsファイルを使用します。あなたのpackage.jsonこれらのスクリプトを使用する代わりに

"scripts": { 
    "dev": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules", 
    "watch": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules", 
    "hot": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot", 
    "production": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules" 
},