URL重写会在Laravel应用程序的已编译CSS文件中生成错误的URL [英] URL rewriting generate wrong URLs in compiled CSS file in Laravel application

问题描述

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

I try to compile Font Awesome SCSS files in Laravel application. Font Awesome installed with NPM. Compiled CSS stored in 'public/css/' folder. Also 'public/fonts/' folder created. But URLs in compiled CSS file leads to '/fonts/' so it will look for fonts in 'public/css/fonts'. Which is not the case.

问题.

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

1. I try to figure out why Laravel create 'public/fonts' folder but generate '/fonts/' URL in CSS file instead of '../fonts/'?

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

2. I know there's an option called 'processCssUrls: false' that fix this issue. In documentation they say that rewriting URLs is a useful feature, but how its useful if it generate wrong URLs?

3.而且我想知道它应该那样工作吗?这个问题有什么解释吗?

3. And I wonder should it work like that? Is there any explanation to this issue?

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

It's strange, that default Laravel feature not work properly. On Picture 1 You can see folder structure, after compilation and generated CSS file with wrong URLs. On Picture 2 You can see solutions to this issue. But, it will work until recompilation. Code snippets of SCSS and webpack.mix.js files added.

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

Picture 1 - Folder 'fonts' and wrong CSS URLs created after compilation

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

Picture 2 - Everything working after manually changing paths

1. SCSS文件:

1. SCSS file:

// 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文件:

2. webpack.mix.js file:

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

推荐答案

遇到相同的问题，并在回购的封闭问题中找到此修复程序. https://github.com/JeffreyWay/laravel-mix/issues/1136

Ran into the same problem and found the fix in a closed issue on the repo. https://github.com/JeffreyWay/laravel-mix/issues/1136

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

Set the resource root in the webpack.mix.js using the following: mix.setResourceRoot('../');

这篇关于URL重写会在Laravel应用程序的已编译CSS文件中生成错误的URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！