TypeScript SVG cannot find modules

2021-07-27 1,497 阅读1分钟

在TypeScript中引入svg文件报错

import logo from './logo.svg'

解决方案

如果项目中使用webpack打包，你可以新建一个专门的文件来解决这个问题，这个文件叫做custom.d.ts。

declare module "*.svg" {
    const content:string;
    export default content;
}

使用svg-sprite-loader

安装

npm install svg-sprite-loader -D
//or
yarn add svg-sprite-loader -D

在vue.config.js中加入代码

const path = require('path')

module.exports = {
  lintOnSave: false,
  chainWebpack:config => {
    const dir = path.resolve(__dirname,'src/assets/icons')

    config.module
      .rule('svg-sprite')
      .test(/.svg$/)
      .include.add(dir).end()
      .use('svg-sprite-loader').loader('svg-sprite-loader').options({extract:false}).end()
    // eslint-disable-next-line @typescript-eslint/no-var-requires
    config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'),[{pluginSprite:true}])
    config.module.rule('svg').exclude.add(dir)
  }
}

使用svg、use标签

<svg>
    <use xlink:href="#label"/>
</svg>

此时svg会引入到body中，是loader的作用，当import是loader发现引入的是svg文件就将该文件转化为symble标签。

解决需要多次import的问题

let importAll = (requireContext:__WebpackModuleApi.RequireContext)=>requireContext.keys().forEach(requireContext);
try{
  importAll(require.context('../assets/icons',true,/.svg$/))
}catch(error){
  console.log(error);
}//try,catch是为了防止在单元测试中发生错误而停止的情况