如何在SCSS中配置URL文件的正确相对路径（Webpack+PugPlugin）

问题 #

在SCSS中通过background: url(../images/bg-blue.svg);引入图片时，配置PugPlugin的css.outputPath为'assets/css/'后，生成的CSS中图片路径变为根相对的background:url(assets/images/bg-blue.73cdd532.svg);，但实际需要的是相对于CSS目录的background: url(../images/bg-blue.73cdd532.svg);。

环境信息：

• Webpack版本：^5.75.0
• PugPlugin版本：^4.9.2
• 系统：Windows

当前相关配置如下：

PugPlugin配置 #

new PugPlugin({
    pretty: true,
    css: {
        enabled: true,
        test: /\.(css|scss|sass|less|styl)$/,
        outputPath: 'assets/css/',
    },
}),

样式与图片规则 #

{
  test: /\.(scss|css)$/,
  use: ['css-loader', 'postcss-loader', 'sass-loader'],
},
{
  test: /\.(png|jpg|jpeg|ico|svg)/,
  type: 'asset/resource',
  generator: {
    // output filename of images
    filename: 'assets/images/[name].[hash:8][ext]',
  },
}, 

Output配置 #

output: {
  path: path.join(__dirname, 'dist/'),
  filename: 'assets/js/[name].js',
  path: __dirname + '/dist',
  assetModuleFilename: path
      .join('assets/images', '[name][ext]')
      .replace(/\\/g, '/'),
  clean: true,
}

构建后的文件结构符合需求，但图片路径不符合预期。

解决方案 #

1. 配置css-loader的相对路径 #

修改样式规则中css-loader的配置，添加publicPath: '../'，让css-loader生成相对于CSS文件所在目录的图片路径：

{
  test: /\.(scss|css)$/,
  use: [
    {
      loader: 'css-loader',
      options: {
        publicPath: '../',
      },
    },
    'postcss-loader',
    'sass-loader'
  ],
},

2. 修复Output配置的重复项并统一资源路径 #

Output配置中存在重复的path属性，删除重复项，并让assetModuleFilename与图片规则的generator.filename保持一致，避免路径冲突：

output: {
  path: path.join(__dirname, 'dist/'),
  filename: 'assets/js/[name].js',
  assetModuleFilename: 'assets/images/[name].[hash:8][ext]',
  clean: true,
}

3. 保留PugPlugin的css输出路径设置 #

维持PugPlugin中css.outputPath: 'assets/css/'的配置不变，因为我们已经通过css-loader的publicPath属性控制了相对路径逻辑。

调整完成后，生成的CSS文件中图片路径会变为../images/bg-blue.73cdd532.svg，符合相对于CSS目录的需求。

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