我尝试在 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 中,您可以看到文件夹结构,编译后生成的 CSS 文件带有错误的 URL。在图 2 您可以看到此问题的解决方案。但是,它会一直工作到重新编译。添加了 SCSS 和 webpack.mix.js 文件的代码片段。
图 1 - 编译后创建的文件夹“字体”和错误的 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'; …Run Code Online (Sandbox Code Playgroud)