Webpack问题：如何阻止css-loader替换SVG URL为哈希命名文件

问题分析 #

你遇到的核心问题是：所有SVG都被svg-sprite-loader处理成了JS模块，当css-loader解析CSS里的url('./assets/icons/check-icon.svg')时，会把这个SVG当作模块导入，最终生成的哈希文件是svg-sprite-loader输出的JS代码，而非实际的SVG文件，导致CSS无法加载正确图标。

解决方案 #

下面提供两种可行的配置方案，根据你的需求选择：

方案1：区分JS和CSS中SVG的处理规则（推荐） #

如果需要同时支持JS导入SVG生成雪碧图和CSS引用SVG作为背景图，给SVG配置两套loader规则，分别处理不同场景的SVG：

修改SVG处理配置

// 处理JS中导入的雪碧图SVG（导入时需加?sprite后缀，比如 import CheckIcon from './assets/icons/check-icon.svg?sprite'）
{
    test: /\.svg$/,
    use: [
        {
            loader: 'svg-sprite-loader',
            options: {
                runtimeCompat: true,
            },
        },
    ],
    include: [/assets/],
    resourceQuery: /sprite/, // 只匹配带?sprite查询参数的SVG导入
},
// 处理CSS中引用的背景图SVG，直接输出原文件到指定目录
{
    test: /\.svg$/,
    type: 'asset/resource',
    generator: {
        filename: 'assets/icons/[name].[ext]' // 保留原文件名输出到dist/assets/icons/
    },
    include: [/assets/],
    exclude: /\.svg\?sprite$/, // 排除已经被雪碧图规则处理的SVG
},

SCSS处理配置保持不变

原有的SCSS配置不需要修改，css-loader会自动把CSS里的SVG url解析为打包后的正确路径：

{
    test: /\.s[ac]ss$/i,
    use: [
        'style-loader',
        {
            loader: MiniCssExtractPlugin.loader,
            options: {
                esModule: false,
            },
        },
        'css-loader',
        'postcss-loader',
        {
            loader: 'sass-loader',
            options: {
                implementation: require('sass'),
                sourceMap: true,
            },
        },
    ],
}

方案2：让css-loader直接保留SVG的原路径 #

如果已经通过其他方式（比如copy-webpack-plugin）把SVG文件复制到了dist/assets/icons/目录，不需要Webpack处理CSS中的SVG资源，只需要让css-loader不替换url路径：

修改css-loader的配置，添加url.filter规则跳过SVG的解析：

{
    loader: 'css-loader',
    options: {
        url: {
            filter: (url, resourcePath) => {
                // 对SVG文件跳过url处理，直接保留原路径
                if (url.endsWith('.svg')) {
                    return false;
                }
                return true;
            },
        },
    },
}

这样CSS中的url('./assets/icons/check-icon.svg')会被原样保留，直接指向dist目录下的对应SVG文件。

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