URL重写会在Laravel应用程序的已编译CSS文件中生成错误的URL

Question

我尝试在Laravel应用程序中编译Font Awesome SCSS文件。 NPM安装了Font Awesome。编译后的CSS存储在“ public / css /”文件夹中。还创建了“ public / fonts /”文件夹。但是，已编译CSS文件中的URL会导致“ / fonts /”，因此它将在“ public / css / fonts”中查找字体。事实并非如此。

问题。

1.我试图弄清楚Laravel为什么创建“ public / fonts”文件夹，却在CSS文件中而不是“ ../fonts/”中生成“ / fonts /” URL？

2.我知道有一个名为“ processCssUrls：false”的选项可以解决此问题。他们在文档中说重写URL是有用的功能，但是如果生成错误的URL，重写功能有什么用呢？

3。我想知道它是否应该那样工作？这个问题有什么解释吗？

奇怪的是，默认的Laravel功能无法正常工作。在图片1上，您可以在编译和生成具有错误URL的CSS文件后看到文件夹结构。在图片2上，您可以看到此问题的解决方案。但是，它将一直工作到重新编译。添加了SCSS和webpack.mix.js文件的代码片段。

图片1-编译后创建的文件夹'fonts'和错误的CSS URL

图片2-手动更改路径后一切正常

1。 SCSS文件：

// Variables
@import 'variables';

// FontAwsome
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/brands';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/regular';

2。 webpack.mix.js文件：

mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/fawesome.scss', 'public/css')
// Work with this
.options({
    processCssUrls: false
});

Answer 1

遇到相同的问题，并在回购的一个封闭问题中找到解决方案。 https://github.com/JeffreyWay/laravel-mix/issues/1136

使用以下命令在webpack.mix.js中设置资源根： mix.setResourceRoot（'../');