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')

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

1 个答案: