如何在Laravel Mix中保留CSS里图片与字体的相对路径

当然可以保留相对路径！Laravel Mix默认会把Sass里的相对URL转成绝对路径，这确实会给子目录部署带来麻烦，下面就告诉你怎么修改配置，还有几个实用的最佳实践来应对这种场景。

修改Mix配置禁用URL自动转换 #

要保留你写的相对路径，只需要在webpack.mix.js里给Sass编译添加一个配置项，禁用CSS URL的自动处理：

1. 打开项目根目录的webpack.mix.js文件
2. 在你的sass编译代码中加入options: { processCssUrls: false }，示例如下：

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

这个配置会让Mix完全保留你在Sass中编写的相对路径，比如url('../images/background.png')编译后不会被改成url('/images/background.png')，完美适配根目录和子目录部署场景。

其他适配多部署目录的最佳实践 #

除了直接保留相对路径，还有几个方案可以灵活应对不同部署环境：

• 环境变量控制根路径：
  在项目的.env文件中添加一个自定义变量，比如APP_ASSET_URL=/（根目录部署）或者APP_ASSET_URL=/subfolder/（子目录部署）。然后在Sass中定义全局变量：

  $asset-base-url: env('APP_ASSET_URL');
  

  之后在样式里使用这个变量构建路径：url('#{$asset-base-url}/images/background.png')。部署时只需要修改.env里的变量值，不用改动代码。

• 调整资源目录结构：
  把图片、字体等静态资源放在和CSS文件同层级的目录下，比如把images文件夹放到public/css里面，这样路径可以写成url('images/background.png')。不管部署在根目录还是子目录，CSS和资源文件的相对位置始终不变，避免路径问题。

• 结合版本化功能：
  如果需要处理资源缓存问题，可以配合Mix的版本化功能。在配置里加上mix.version()，然后在Blade模板中用mix('css/app.css')引入资源，Laravel会自动生成带哈希值的正确路径，同时不影响多目录适配：

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

内容的提问来源于stack exchange，提问作者Imran Ahmed