如何在create-react-app的React+TypeScript项目中导入SASS文件？

别担心，这个问题在CRA+TS的项目里挺常见的，和Angular内置支持SCSS的逻辑不一样，咱们一步步来搞定：

首先，先确认你已经安装了SASS编译依赖——现在Create React App不再默认内置SASS支持，得手动装：

• 用npm：npm install sass --save-dev
• 用yarn：yarn add sass --dev

接下来是核心问题：TypeScript本身不认识.scss文件的类型，所以会抛出Cannot find module的错误。咱们需要给它加个类型声明：

1. 在项目的src目录下新建一个名为styles.d.ts的文件（后缀必须是.d.ts，这是TypeScript识别的类型声明文件格式）。
2. 根据你的使用习惯，选择对应的声明代码：
   • 如果用CSS Modules（也就是导入后用类名对象的方式，比如styles.myClass），就写：

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

   • 如果不用CSS Modules（直接全局导入SCSS），可以写更简单的版本：

     declare module '*.scss';
     

3. 最后重启你的开发服务器（npm start/yarn start），让TypeScript重新加载类型声明文件。

现在你就能正常导入SCSS文件了：

• CSS Modules场景：import styles from './mystyles.scss';，组件里用className={styles.myClass}
• 全局导入场景：import './mystyles.scss';，组件里直接用className="myClass"

另外提一句：现在CRA推荐用sass包，别再装已经废弃的node-sass啦。

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