Laravel Mix URL 处理扭曲文件路径

Question

我正在尝试使用内部 URL 处理设置 Larvel Mix，但不知何故它破坏了我的所有文件路径。 例如，如果我在 app.scss 中使用图标:

background-image: url("../icons/search.svg");

每次进入app.css

background-image: url(/fonts/search.svg?0aeb120951582cc56d9d8681f88ff583);

相应的文件也被复制到 public/fonts/中，我只是不知道这个文件夹是在哪里进入我的路径的。 在我的 webpack.mix.js 中，我没有任何特别的东西。

mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')

有人遇到过这样的问题吗？

Answer 1

这是因为 Laravel-mix 默认会优化相对样式表 url()。

要禁用此功能，请转至 webpack.mix.js在您的项目根目录中。

添加:

mix.options({
    processCssUrls: false
});

---

但是，如果你使用bootstrap-sass，会导致它的Glyphicons字体无法工作。

要解决此问题，请转到 resources\assets\sass\_variables.scss

更改$icon-font-path:至"../fonts/vendor/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d5fb8ab7babaa1a6a1a7b4a5f8a6b4a6a695e6fbe6fbe2" rel="noreferrer noopener nofollow">[email protected]</a>@bootstrap-sass/bootstrap/";