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

时间:2019-12-29 02:52:32

标签: css laravel npm sass

我有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

如何添加图像文件夹进行编译?

3 个答案:

答案 0 :(得分:1)

该图像文件可能不存在。

答案 1 :(得分:0)

您能写出确切的sass代码吗?

答案 2 :(得分:0)

这是不正确的路径错误,您在CSS中的某个地方使用了./images/bg-main.png。因此,找到该实例并更改路径background-image:url('~/images/bg-main.png');