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

Posted 2023-02-22

【中文标题】laravel mix：如何在css中保留图像和字体的相对路径

【英文标题】：How to keep relative paths in CSS for images and fonts in Laravel Mix

【发布时间】：2018-06-11 09:27:08

【问题描述】：

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

路径是否可能没有更新并保持相对关系？

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

是否有其他最佳实践来处理这种情况？

【参考方案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

【讨论】：

这行得通！但它产生的另一个问题是它不处理供应商网址。例如现在尝试从 public/fonts 文件夹而不是 public/fonts/vendor/font-awsome... 尝试 font-awesome 字体 url，有没有办法绕过这个？

现在，我只是在我的 assets/fonts 目录中复制了 font-awesome 字体（因为我已经使用 mix.copy() 将图像和字体从 assets 复制到 public 目录），所以它适用于processCssUrls: false，但必须有一些可靠的解决方案适用于供应商 css 以及应用 css