如何在 CSS 中为 Laravel 中的图像和字体保留相对路径 Mix
How to keep relative paths in CSS for images and fonts in Laravel Mix
当Laravel Webpack/Mix执行并将SASS转换为CSS时,它将url('../images/background.png');
等相对路径更改为url('/images/background.png');
等绝对路径].
路径是否可能未更新并保持相对路径?
原因是部署可能位于不同服务器上的不同文件夹中,因此相对路径将适用于所有文件夹结构。例如,它将适用于 http://www.example.com/
以及 http://www.example.com/subfolder/
。但是如果使用绝对路径,那么在子文件夹的情况下,CSS将找不到图片和字体。
是否有其他一些最佳实践来处理这种情况?
来自the docs:
By default, Laravel Mix and Webpack will find example.png
, copy it to your public/images
folder, and then rewrite the url()
within your generated stylesheet. As such, your compiled CSS will be.
As useful as this feature may be, it's possible that your existing folder structure is already configured in a way you like. If this is the case, you may disable url()
rewriting like so:
mix.sass('resources/assets/app/app.scss', 'public/css')
.options({
processCssUrls: false
});
当Laravel Webpack/Mix执行并将SASS转换为CSS时,它将url('../images/background.png');
等相对路径更改为url('/images/background.png');
等绝对路径].
路径是否可能未更新并保持相对路径?
原因是部署可能位于不同服务器上的不同文件夹中,因此相对路径将适用于所有文件夹结构。例如,它将适用于 http://www.example.com/
以及 http://www.example.com/subfolder/
。但是如果使用绝对路径,那么在子文件夹的情况下,CSS将找不到图片和字体。
是否有其他一些最佳实践来处理这种情况?
来自the docs:
By default, Laravel Mix and Webpack will find
example.png
, copy it to yourpublic/images
folder, and then rewrite theurl()
within your generated stylesheet. As such, your compiled CSS will be.As useful as this feature may be, it's possible that your existing folder structure is already configured in a way you like. If this is the case, you may disable
url()
rewriting like so:
mix.sass('resources/assets/app/app.scss', 'public/css')
.options({
processCssUrls: false
});