[英]Importing svgs with TypeScript + Webpack
我有一个非常简单的 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
添加什么吗?
另外,对于版本,我正在使用:
尝试添加
"files": [
"custom.d.ts"
]
到您的 tsconfig.json
您可以在tsconfig.json中指定一个typeRoot指向 custom.d.ts 的位置。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.