laravel mix sass images not found/hash

Question

我第一次和Laravel一起工作.随着5.4版本,他们推出了laraval混合.我试图将我的静态网站的SASS(我用gulp编译)粘贴到资源文件夹中的sass文件中.这很顺利,我的SASS将被编译到公共地图中的app.css文件中.

我有一个主要问题.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);
}

因此,不是像我在SASS文件中那样将url编译为css,而是将其编译为与最后的哈希不同的东西.此外,在编译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的位置相同)

从新的webpack.config.js文件中查找并删除此字符串

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

完成后,您必须更新您的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"
},