如何在 Vue 的 css 部分中加载外部 svg

Question

我需要在我的 Vue 组件的 css 部分加载外部 svg 图像。我有 vue.config.js 文件，如下所示：

const path = require('path');
module.exports = {
  lintOnSave: false,
  chainWebpack: config => {
    const svgRule = config.module.rule('svg');
    svgRule.uses.clear();

    svgRule
      .oneOf('external')
        .resourceQuery(/\?external/)
        .use('file')
          .loader('file-loader')
          .options({
            name: 'assets/[name].[hash:8].[ext]'
          })
          .end()
          .end()
      .oneOf('inline')
          .include
          .add(path.resolve(__dirname, 'src/components/svg'))
          .end()
        .use('vue-svg-loader')
          .loader('vue-svg-loader')
          .end()
          .end()
  }
};

当我像这样从 html 模板加载 svg 图像时，一切正常。

<template>
    <div>
        <img src="@/components/svg/close-icon.svg?external" alt="" />
    </div>
</template>

这样我可以看到比在 DevTools 文件的网络选项卡中加载的哈希值，我可以在页面上看到它。 但是当我尝试通过组件的 css 部分加载它时，它失败了。首先，我无法使用@ 设置路径，例如'@/components/svg/close-icon.svg?external，vue 显示找不到模块的错误消息。所以我尝试'/src/components/svg/close-icon.svg?external 路径。你可以在下面看到它。

<template>
  <button>Button</button>
</template>

...

<style lang="sass" scoped>
button
    background: url('/src/components/svg/check-icon.svg?external')
</style>

现在 vue 不会抛出错误，但我在 DevTools 中看到文件路径没有散列并且看起来像 http://localhost:8080/src/components/svg/check-icon.svg?external，所以文件无法加载。我如何配置 webpack 以从 css 部分加载外部 svg 图像。

Answer 1

来自css-loader的文档：

从 node_modules 路径导入资产（包括 resolve.modules） 对于别名，请在其前面加上 ~:

url(~module/image.png) => require('module/image.png')
url('~module/image.png') => require('module/image.png')
url(~aliasDirectory/image.png) => require('otherDirectory/image.png')