Webpack图像找不到模块

编程问答 2022-08-11

问题描述

我正在尝试通过以下方式导出图像：

const path = require('path');
module.exports = {
  entry: './src/index.ts',module: {
    rules: [
      {
        test: /\.ts?$/,use: 'ts-loader',exclude: /node_modules/,},{
        test: /\.(png|svg|jpg|gif)$/,use: [
          'file-loader',],resolve: {
    extensions: [ '.tsx','.ts','.js' ],output: {
    filename: 'bundle.js',path: path.resolve(__dirname,'dist'),};

这是我的文件夹结构：

enter image description here

这是我的index.ts文件：

import {css} from 'lit-element';
import ErrorIcon from './assets/icons/error.svg';
export const iconStyles = css`
  .icon-error {
    background-image : src("${ErrorIcon.src}");
  }
  .icon-warning {
     background-image : src("/assets/icons/warning.svg");
  }`;

当我运行build时，出现以下错误：

TS2307：找不到模块“ ./assets/icons/error.svg”或其相应的类型声明。

我做错了什么？

解决方法

尝试一下：

background-image : url("${ErrorIcon.src}");
,

我在打字稿中找到了问题，您必须添加一个如下所示的文件：

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

Source

imageimagetypescripttypescriptwebpackwebpackwebpack