使用TypeScript + Webpack导入svg

Question

我有一个非常简单的Webpack + TypeScript设置，正在尝试导入svgs。我正在使用svg-sprite-loader，如果require()我的svg如下所示，则效果很好：

require('./assets/alert.svg')

-

但是，我更喜欢使用以下内容：

import alert from './assets/alert.svg'

这样，我得到以下错误：

TS2307: Cannot find module './assets/alert.svg'.

我custom.d.ts在项目根目录中有一个文件（阅读此文件后：https : //webpack.js.org/guides/typescript/#importing-other-assets）。看起来像这样：

declare module '*.svg' {
  const content: any;
  export default content;
}

我的tsconfig样子是：

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "noImplicitAny": false,
    "sourceMap": false,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "lib": ["es6", "dom"]
  },
  "exclude": [
    "**/*.spec.ts"
  ]
}

最后，我的webpack设置包括：

 module: {
   rules: [
       {
           test: /\.ts$/,
           use: `awesome-typescript-loader`
       },
       {
           test: /\.html$/,
           loader: 'html-loader'
       },
       {
           test: /\.svg$/,
           loader: 'svg-sprite-loader'
       }
   ]
 }

我试图了解该custom.d.ts文件如何发挥作用。我需要添加一些东西tsconfig吗？

另外，对于版本，我使用的是：

• Webpack @ 2.5.0
• TypeScript @ 2.4.0
• svg-sprite-loader @ 3.6.2
• 很棒的打字机加载器@ 3.1.2

Answer 1

您可以在 tsconfig.json 中指定指向 custom.d.ts 位置的typeRoot 。