Webpack使用相对路径引用SVG作为背景图时报can't resolve错误

问题解决方案 #

第一步：先确认路径正确性

• 确认checkmark.svg文件与你写该background样式的scss文件处于同一目录，相对路径./是基于当前scss文件的所在路径计算的，不是项目根路径，路径写错是触发该报错的最高频原因。

如果路径确认无误，按以下步骤修改webpack配置： #

第二步：补充resolve模块解析配置

在webpack配置中与module同级添加resolve配置，将项目src目录设为模块解析根目录，还可以配置别名简化引用避免多层级相对路径写错：

const path = require('path');
module.exports = {
  // 其他原有配置保持不变
  resolve: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
    alias: {
      '@': path.resolve(__dirname, 'src')
    },
    extensions: ['.js', '.scss', '.svg']
  },
  module: {
    // 你的原有rules配置保持不变
  }
}

配置完成后可以用别名路径引用资源，路径开头加~告诉webpack按模块规则解析：

background-image: url('~@/components/checkbox-list/__menu/checkbox-list__checkbox/checkmark.svg');

第三步：调整scss处理规则

给css-loader补充配置，解决@import引入的scss文件内部url解析异常的问题：

{
  test: /\.scss$/,
  use: [
    MiniCssExtractPlugin.loader,
    {
      loader: 'css-loader',
      options: {
        importLoaders: 1,
        url: true
      }
    },
    'sass-loader'
  ]
}

第四步：补充svg资源输出配置

给字体、svg的资源规则补充输出路径配置，避免编译后资源路径混乱：

{
  test: /\.(woff(2)?|eot|ttf|otf|svg)$/,
  type: 'asset',
  generator: {
    filename: 'assets/[name].[contenthash][ext]'
  }
}

如果以上配置完成还是报错，可以尝试将svg的type改为asset/resource，和图片资源的处理规则保持一致。

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