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

Imr*_*med 5 css elixir-mix laravel webpack

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

是否可能不更新路径并保持相对路径?

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

还有其他一些最好的做法来处理这种情况吗?

Ale*_*nin 11

来自文档:

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

尽管此功能可能很有用,但您现有的文件夹结构可能已经按照您喜欢的方式进行配置.如果是这种情况,您可以禁用url()重写,如下所示:

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

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

  • 这个有效!但它创建的另一个问题是它不处理供应商网址.对于例如font-awesome字体网址现在尝试从`public/fonts`文件夹而不是`public/fonts/vendor/font-awsome ...`,是否有某种方法可以绕过这个? (2认同)
  • 现在,我只是在我的assets / fonts目录中复制了真棒字体(因为我已经在使用mix.copy()将图像和字体从资产复制到公共目录中),所以它可以与`processCssUrls:false`,一起使用,但必须有一些适用于供应商CSS和应用程序CSS的可靠解决方案 (2认同)