如何在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之类的路径，无法显示该模块未找到的错误消息。所以我尝试了'/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')