css - Laravel scss npm run dev - 无法解析 '../images/bg-main.png'

Question

我有 Laravel 元素，我想从 scss 生成 css 文件。我的 webpack.mix.js 文件如下所示:

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

当我运行命令 npm run dev 时出现错误:

ERROR in ./resources/assets/sass/style.scss
Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve '../images/bg-main.png' in '/var/www/html/bitpay/resources/assets/sass'

ERROR in ./node_modules/css-loader??ref--4-2!./node_modules/postcss-loader/lib??postcss!./node_modules/resolve-url-loader??ref--4-4!./node_modules/sass-loader/lib/loader.js??ref--4-5!./resources/assets/sass/style.scss
Module not found: Error: Can't resolve '../images/bg-main.png' in '/var/www/html/bitpay/resources/assets/sass'
 @ ./node_modules/css-loader??ref--4-2!./node_modules/postcss-loader/lib??postcss!./node_modules/resolve-url-loader??ref--4-4!./node_modules/sass-loader/lib/loader.js??ref--4-5!./resources/assets/sass/style.scss 7:14663-14695
 @ ./resources/assets/sass/style.scss
 @ multi ./node_modules/laravel-mix/src/builder/mock-entry.js ./resources/assets/sass/style.scss

ERROR in ./node_modules/css-loader??ref--4-2!./node_modules/postcss-loader/lib??postcss!./node_modules/resolve-url-loader??ref--4-4!./node_modules/sass-loader/lib/loader.js??ref--4-5!./resources/assets/sass/style.scss
Module not found: Error: Can't resolve '../images/bg-recommendations.png' in '/var/www/html/bitpay/resources/assets/sass'
 @ ./node_modules/css-loader??ref--4-2!./node_modules/postcss-loader/lib??postcss!./node_modules/resolve-url-loader??ref--4-4!./node_modules/sass-loader/lib/loader.js??ref--4-5!./resources/assets/sass/style.scss 7:17599-17642 7:22181-22224
 @ ./resources/assets/sass/style.scss
 @ multi ./node_modules/laravel-mix/src/builder/mock-entry.js ./resources/assets/sass/style.scss

如何将图片文件夹添加到编译中？

Answer 1

问题是 mix 找不到您在 style.scss 中引用的图像 bg-main.png。

您可以添加不处理 css url 的混合选项，如下所示:

mix.options({
    processCssUrls: false
});

这会产生一些后果:

• mix 不会检查图像是否存在。
• mix不会自动复制图片到public目录。

更好的解决方案是将图像放在 mix 期望的位置:mix 期望 ../images/bg-main.png 位于目录 resources/images/ 中

引用资料:

• https://laravel-mix.com/docs/6.0/url-rewriting
• https://laravel-mix.com/docs/6.0/faq#why-is-it-saying-that-an-image-in-my-css-file-cant-be-found-in-node_modules