Laravel Mix未找到Sass图片/哈希值。

Question

Laravel Mix未找到Sass图片/哈希值。

9

我第一次使用 Laravel。在 5.4 版本中，他们引入了 Laravel Mix。我尝试将我用 gulp 编译的静态网站的 SASS 粘贴到资源文件夹中的 sass 文件中。这一切都很顺利，我的 SASS 将被编译到公共地图中的 app.css 文件中。

我有一个主要问题。SASS 文件(resources/assets/images) 中的所有图片没有像我希望的那样编译。

SASS 文件中的代码 (resources/assets/SASS/banners.scss)

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

使用Mix编译（app.css）

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

所以，与我在SASS文件中编译url到css不同，它将其编译为带有哈希结尾的不同内容。此外，在编译SASS后，它会生成一个图像映射，其中包含我在SASS文件中使用的图像。我的图像映射最初位于resources / assets / images。

我不知道我做错了什么。我尝试更改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');

- Giesburts

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- oBo · Accepted Answer

我现在遇到了同样的问题。据我所知，在最新版本的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"
},