Laravel Mix中CSS相对路径转换不符合预期问题求助

文件结构：

example/
├── public/
│   ├── css
│   │     └── home
│   │         ├── app.css
│   │         └── app.css.map
│   ├── images
│   │   ├── a.jpg
│   │   └── b.jpg
└── resources/
    ├── scss
    │   ├── app.scss
    │   └── ....
    └── images
        ├── a.jpg
        └── b.jpg

在resources/scss/app.scss中编写：

background-image: url(../images/a.jpg);

打包后public/css/home/app.css实际生成路径：

background-image: url(/images/a.jpg);

预期生成路径：

background-image: url(../../images/a.jpg);

已排除processCssUrls: false方案，需其他解决办法。

1. 配置css-loader的url选项（Webpack环境） #

修改webpack配置中css-loader的参数，通过指定资源解析基准和输出前缀调整路径：

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              url: {
                // 设定SCSS中资源引用的基准目录
                context: path.resolve(__dirname, 'resources'),
                // 输出时资源路径相对于当前CSS文件的前缀
                publicPath: '../../'
              }
            }
          },
          'sass-loader'
        ]
      }
    ]
  }
};

通过context定义资源解析的起始目录，publicPath指定输出路径的相对前缀，就能生成符合预期的相对路径。

2. 用resolve-url-loader配合sass-loader #

开启sass-loader和css-loader的sourceMap，搭配resolve-url-loader精准处理相对路径：

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: { sourceMap: true }
          },
          {
            loader: 'resolve-url-loader',
            options: {
              root: path.resolve(__dirname, 'public')
            }
          },
          {
            loader: 'sass-loader',
            options: { sourceMap: true }
          }
        ]
      }
    ]
  }
};

必须开启sourceMap，resolve-url-loader才能基于源文件路径计算正确的输出相对路径。

3. SCSS内直接指定相对路径（临时方案） #

如果不想修改打包配置，可在SCSS中直接写相对于输出CSS文件的路径，或用变量统一管理：

$image-base: '../../images/';
background-image: url(#{$image-base}a.jpg);

这种方式灵活性较低，优先推荐配置层面的解决方案。

内容的提问来源于stack exchange，提问作者Mahdi Bashirpour