如何在TypeScript版create-react-app项目中正确导入SCSS样式文件

• 文件名匹配错误：CRA默认仅识别文件名带.module后缀的样式文件为CSS Module，会将类名编译为带唯一哈希的对象供组件调用。当前组件导入路径为./component7.module.scss，但实际样式文件名为component7.scss，导致导入后styles变量为undefined，所有className赋值失效。
• 缺少SCSS编译依赖：CRA默认不内置SCSS编译能力，未安装对应依赖时，SCSS语法无法被解析为有效CSS，样式不会被打包注入页面。
• TypeScript项目缺少SCSS类型声明：未配置类型声明时，TS会拦截对.module.scss文件的导入操作，导致样式模块加载中断。

• 重命名样式文件：将原component7.scss重命名为component7.module.scss，与组件内的导入路径完全对齐，避免路径解析冲突。
• 安装SCSS编译依赖：在项目根目录执行npm install sass安装官方编译依赖，安装完成后重启本地开发服务，CRA会自动启用SCSS编译规则。
• 补充TS类型声明：打开src/react-app-env.d.ts文件，添加SCSS模块的类型定义，消除TS导入报错：

  declare module '*.module.scss' {
    const classes: { readonly [key: string]: string };
    export default classes;
  }
  

• 校验JSX结构：原组件代码中flexWrapperOne对应的div标签存在闭合缺失问题，修正JSX结构为标签正确嵌套闭合，避免渲染异常。

重启服务后打开浏览器开发者工具，检查页面元素的class属性，若出现类似component7_component7__1aBcD格式的带哈希的类名，且样式面板中能匹配到SCSS定义的规则，即表示样式生效。

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