laravel mix:如何在css中保留图像和字体的相对路径

Question

当laravel webpack/mix执行并将sass转换为css时，它会将相对路径(如url('../images/background.png'); )更改为绝对路径(如url('/images/background.png'); )。

有没有可能路径没有更新并保持为相对路径？

原因是部署可能位于不同服务器上的不同文件夹中，因此相对路径将适用于所有文件夹结构。例如，它可以在http://www.example.com/和http://www.example.com/subfolder/上工作。但是如果使用绝对路径，那么在子文件夹的情况下，css将找不到图像和字体。

有没有其他的最佳实践来处理这种情况？

Answer 1

来自the docs

默认情况下，Laravel Mix和Webpack将找到example.png，将其复制到public/images文件夹，然后在生成的样式表中重写url()。因此，编译后的CSS将是。

尽管此功能可能很有用，但您现有的文件夹结构可能已经以您喜欢的方式进行了配置。如果是这种情况，您可以像这样禁用url()重写：

mix.sass('resources/assets/app/app.scss', 'public/css')
   .options({
       processCssUrls: false
   });

https://laravel.com/docs/5.5/mix#working-with-stylesheets