时间戳

首页 > 解决方案 > URL 重写在 Laravel 应用程序中编译的 CSS 文件中生成错误的 URL

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

问题描述

我尝试在 Laravel 应用程序中编译 Font Awesome SCSS 文件。与 NPM 一起安装的 Font Awesome。编译后的 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 上，您可以看到文件夹结构，编译后生成的 CSS 文件带有错误的 URL。在图 2 上，您可以看到此问题的解决方案。但是，它会一直工作到重新编译为止。添加了 SCSS 和 webpack.mix.js 文件的代码片段。

图 1 - 编译后创建的文件夹“字体”和错误的 CSS URL

图片1

图 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
});

标签： csslaravelsass

解决方案

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

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

推荐阅读