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

Question

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

问题。

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

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

遇到了同样的问题，并在 repo 上的一个已关闭问题中找到了修复。 https://github.com/JeffreyWay/laravel-mix/issues/1136

使用以下命令在 webpack.mix.js 中设置资源根目录:mix.setResourceRoot('../');