Webpack：阻止 css-loader 用散列 svgs 替换 svg url

Question

我意识到我的项目在某个时候停止显示我从 scss 文件链接的 svgs。

我有这样的台词：

background-image: url('./assets/icons/check-icon.svg');

Webpack，我怀疑它是

css-loader

，因为我注释掉了所有其他 css-loader，现在直接在我的

71348f532d829722222a.svg

文件夹中创建像

dist

这样的散列 svg 文件。

文件本身不是 svg，而是 JavaScript，可能是为了在 css 之外的其他地方使用 svgs：

export default {
      id: "check-icon",
      viewBox: "0 0 512 512",
      url: __webpack_public_path__ + "/Users/USER/Documents/fe/src/assets/icons/check-icon.svg",
      toString: function () {
        return this.url;
      }
    }

现在我的CSS当然正在尝试加载这个文件，但它无法显示。 Webpack 还在我的 dist 中创建实际文件夹的副本：

dist/assets/icons/...

所以如果我的CSS的

url()

部分没有替换为这个散列的svg但仍然指向

url('./assets/icons/check-icon.svg')

一切都会工作。但我怎样才能做到这一点呢？

这是我的 webpack 配置的一部分：

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

这是我测试 svgs 的另一部分：

{
    test: /\.svg$/,
    use: [
        {
            loader: 'svg-sprite-loader',
            options: {
                runtimeCompat: true,
            },
        },
    ],
    include: [/assets/],
},

如果我评论后者，那不会有任何区别。 css 中的文件仍然通过哈希链接到不工作的 svg。

Answer 1

不久前我使用了 Webpack，但我从来都不是 Webpack 专家 - 所以我只是看了一下我最后的配置文件之一，因为我记得我也有 svg 的问题。因此，我在这里发布 .svg 文件的 test-parts - 希望它能引导您走向正确的方向。正如你所看到的，我有两个测试，因为我遇到了 Webpack 将所有 .svg 文件保存在我的图像目录中的问题，而我不希望将其用于字体（.svg 类型）。因此，第一个测试是处理除 beeing 字体之外的所有 .svg，第二个测试是处理 font-svgs。

exclude

第一次测试时的字体目录

{
    test: /\.svg(\?v=\d+.\d+.\d+)?$/,
    exclude: [
        `${settings.dirs.srcPath}fonts`
    ],
    loader: 'url-loader',
    options: {
        publicPath: settings.cssUrlPath,
        limit: settings.build.images.limit,
        mimetype: 'image/svg+xml',
        name: ifProduction(path.join(settings.build.images.dir, `[name]${settings.build.hash ? '.[hash:8]' : ''}.[ext]`), path.join(settings.build.images.dir, '[name].[ext]'))
    }
},

include

第二次测试时仅使用字体目录

{
    test: /\.svg(\?v=\d+.\d+.\d+)?$/,
    include: [
        `${settings.dirs.srcPath}fonts`
    ],
    loader: 'url-loader',
    options: {
        publicPath: settings.cssUrlPath,
        limit: settings.build.images.limit,
        mimetype: 'image/svg+xml',
        name: ifProduction(path.join(settings.build.fonts.dir, `[name]${settings.build.hash ? '.[hash:8]' : ''}.[ext]`), path.join(settings.build.fonts.dir, '[name].[ext]'))
    }
},

这里使用的变量当然与项目相关，因此您必须根据您的文件结构调整（或完全删除）它。我的

settings.build.images.limit

值为

20480

。不确定 - 我认为这是不将 svg 内联编写为 base64 （在 css 代码中）的限制。

就像我说的那样，我不是这里的专家 - 希望这至少可以成为解决您的问题的一个良好起点。