laravel mix：如何在 css 中保留图像和字体的相对路径
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48048004/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
laravel mix: how to keep relative paths in css for images and fonts
提问by Imran Ahmed
When laravel webpack/mix executes and converts sass to css, it changes the relative paths like url('../images/background.png');to absolute paths like url('/images/background.png');.
当 laravel webpack/mix 执行并将 sass 转换为 css 时，它会将相对url('../images/background.png');路径像url('/images/background.png');.
Is it possible that the paths are not updated and kept as relative?
路径是否有可能没有更新并保持为相对路径？
The reason is that the deployment could be in different folders on different servers, and so the relative paths will work on all folder structures. For e.g. it will work on http://www.example.com/as well as http://www.example.com/subfolder/. But if absolute path is used, then in case of subfolder the images and fonts will not be found by the css.
原因是部署可能位于不同服务器上的不同文件夹中，因此相对路径将适用于所有文件夹结构。对于例如，它会工作的http://www.example.com/，以及http://www.example.com/subfolder/。但是如果使用绝对路径，那么在子文件夹的情况下，css 将找不到图像和字体。
Is there some other best practice to handle this situation?
是否有其他一些最佳实践来处理这种情况？
回答by Alexey Mezenin
From the docs:
从文档：
By default, Laravel Mix and Webpack will find
example.png, copy it to yourpublic/imagesfolder, 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:
默认情况下，Laravel Mix 和 Webpack 会找到
example.png，将其复制到您的public/images文件夹，然后url()在您生成的样式表中重写。因此，您编译的 CSS 将是。尽管此功能很有用，但您现有的文件夹结构可能已经按照您喜欢的方式进行了配置。如果是这种情况，您可以
url()像这样禁用重写：
mix.sass('resources/assets/app/app.scss', 'public/css')
.options({
processCssUrls: false
});
