使用 TypeScript + Webpack 導入 svgs

Question

我有一個非常簡單的 Webpack + TypeScript 設置，並且正在嘗試導入 svgs。 我正在使用svg-sprite-loader ，如果我require()我的 svgs 如下所示，它運行良好：

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

——

但是，我更喜歡使用以下內容：

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

這樣，我收到以下錯誤：

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

我的項目根目錄中有一個custom.d.ts文件（閱讀本文后： https : custom.d.ts ）。 它看起來像這樣：

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
• 打字稿@ 2.4.0
• svg-精靈加載器@ 3.6.2
• 真棒打字稿加載器@ 3.1.2

Answer 1

嘗試添加

"files": [ 
  "custom.d.ts" 
]  

到您的 tsconfig.json

Answer 2

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