React TypeScript项目导入CSS文件报错，已尝试方案仍未解决

你遇到的报错本质是Webpack没有配置处理普通CSS文件的loader，你之前的操作都是针对TypeScript类型声明的，没有解决Webpack的核心配置问题，以下是分场景的解决方案：

场景1：使用Create React App（CRA）创建的项目 #

CRA默认已经内置了CSS loader配置，出现问题大概率是依赖冲突或配置被修改：

• 先清理依赖重新安装：

  rm -rf node_modules package-lock.json
  npm install
  

• 如果是执行过eject命令暴露了Webpack配置，需要检查webpack.config.js中是否存在处理普通CSS的规则，若缺失则添加：

  {
    test: /\.css$/i,
    exclude: /\.module\.css$/i,
    use: ['style-loader', 'css-loader'],
  }
  

• 若上述操作无效，建议重新初始化CRA项目并迁移代码。

场景2：手动配置Webpack的项目 #

需要手动安装并配置CSS相关loader：

1. 安装依赖：

   npm install --save-dev style-loader css-loader
   

2. 修改webpack.config.js，在module.rules中添加CSS处理规则：

   module.exports = {
     // ...其他Webpack配置
     module: {
       rules: [
         // ...已有的TS/JS处理规则
         {
           test: /\.css$/i,
           oneOf: [
             // 处理模块化CSS（文件名含.module.css）
             {
               test: /\.module\.css$/i,
               use: [
                 'style-loader',
                 {
                   loader: 'css-loader',
                   options: { modules: true }
                 }
               ]
             },
             // 处理普通CSS文件
             {
               use: ['style-loader', 'css-loader']
             }
           ]
         }
       ]
     }
   }
   

补充：完善TypeScript类型声明 #

你之前只声明了模块化CSS的类型，需要补充普通CSS的声明到typings.d.ts：

declare module "*.css";
declare module "*.module.css";
declare module "*.scss";
declare module "*.module.scss";

内容的提问来源于stack exchange，提问作者Shashank Kumar