从Create React App迁移到Vite时CSS默认导入报错求助

问题原因 #

Vite对CSS文件的模块处理逻辑与Create React App（基于Webpack）不同，你尝试用默认导入（import xxx from 'xxx.css'）加载CSS文件，但CSS文件本身并不导出default成员，导致语法错误。

解决方案 #

1. 修正CSS导入方式
   全局CSS不需要赋值给变量，直接导入即可：

   // 替换原来的默认导入
   import 'flag-icon-css/css/flag-icon.css';
   

2. 处理TypeScript类型报错（如果有）
   如果TypeScript提示找不到CSS模块的类型，在项目根目录或src文件夹下创建declarations.d.ts文件，添加以下类型声明：

   declare module '*.css' {
     const styles: Record<string, string>;
     export default styles;
   }
   

   这样既兼容默认导入的写法，也符合TypeScript的类型检查要求。

3. 移除无效的Webpack配置
   迁移到Vite后，项目不再依赖Webpack，原Webpack配置文件（如webpack.config.js）不会生效，所有构建配置需要转移到vite.config.ts中，无需再修改Webpack配置。

内容的提问来源于stack exchange，提问作者Mateus Gonçalves