laravel 混合 sass 个图像而不是 found/hash

Question

我是第一次与 Laravel 一起工作。在 5.4 版本中，他们引入了 laraval mix。我试图将我的 SASS 静态网站（我用 gulp 编译它）粘贴到资源文件夹中的 sass 文件中。这一切顺利，我的 SASS 将被编译到 public 映射中的 app.css 文件。

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

SASS 文件中的代码 (resources/assets/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 文件中使用的图像。我的图像地图最初位于 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');

Answer 1

我现在遇到了同样的问题。据我所知，最新的 laravel 混合版本不再是这种情况。但是因为它还没有在 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"
},

laravel 混合 sass 个图像而不是 found/hash

laravel mix sass images not found/hash

css

sass

laravel

laravel-mix