Question

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

require()

-

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

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

有了这个，我收到以下错误：

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

我的项目根目录中有一个TS2307: Cannot find module './assets/alert.svg'.文件（阅读本文后：https://webpack.js.org/guides/typescript/#importing-other-assets）。它看起来像这样：

custom.d.ts

我的declare module '*.svg' { const content: any; export default content; }看起来像是：

tsconfig

最后，我的webpack设置包括：

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

我试图了解module: { rules: [ { test: /\.ts$/, use: `awesome-typescript-loader` }, { test: /\.html$/, loader: 'html-loader' }, { test: /\.svg$/, loader: 'svg-sprite-loader' } ] }文件是如何发挥作用的。我需要在custom.d.ts中添加一些内容吗？

此外，对于版本，我使用：

Webpack @ 2.5.0
TypeScript @ 2.4.0
svg-sprite-loader @ 3.6.2
awesome-typescript-loader @ 3.1.2

Answer 1

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

Answer 2

尝试添加

"files": [ "custom.d.ts" ] 到您的tsconfig.json

使用TypeScript + Webpack导入svgs

2 个答案: