[英]Importing svgs with TypeScript + Webpack
I have a pretty simple Webpack + TypeScript setup and am trying to import svgs.我有一个非常简单的 Webpack + TypeScript 设置,并且正在尝试导入 svgs。 I'm using
svg-sprite-loader
and it works well if I require()
my svgs like the following:我正在使用
svg-sprite-loader
,如果我require()
我的 svgs 如下所示,它运行良好:
require('./assets/alert.svg')
-- ——
However, I'd prefer to use the following:但是,我更喜欢使用以下内容:
import alert from './assets/alert.svg'
With that, I get the following error:这样,我收到以下错误:
TS2307: Cannot find module './assets/alert.svg'.
I have a custom.d.ts
file in my project root (after reading this: https://webpack.js.org/guides/typescript/#importing-other-assets ).我的项目根目录中有一个
custom.d.ts
文件(阅读本文后: https : custom.d.ts
)。 It looks like this:它看起来像这样:
declare module '*.svg' {
const content: any;
export default content;
}
My tsconfig
looks like:我的
tsconfig
看起来像:
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": false,
"sourceMap": false,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"lib": ["es6", "dom"]
},
"exclude": [
"**/*.spec.ts"
]
}
And finally, my webpack set up includes:最后,我的 webpack 设置包括:
module: {
rules: [
{
test: /\.ts$/,
use: `awesome-typescript-loader`
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.svg$/,
loader: 'svg-sprite-loader'
}
]
}
I'm trying to understand how that custom.d.ts
file comes into play.我试图了解
custom.d.ts
文件是如何发挥作用的。 Is there something I need to add in my tsconfig
?我需要在
tsconfig
添加什么吗?
Also, for versions, I'm using:另外,对于版本,我正在使用:
Try adding尝试添加
"files": [
"custom.d.ts"
]
to your tsconfig.json到您的 tsconfig.json
您可以在tsconfig.json中指定一个typeRoot指向 custom.d.ts 的位置。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.