React+TypeScript项目中SCSS模块无法解析问题求助

云原生阿岚

2026-8-7

解决React+TypeScript项目中SCSS模块无法解析的问题

1. 确认SCSS相关依赖已安装

确保项目已安装处理SCSS的必要依赖，在项目根目录执行：

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

或使用yarn：

yarn add sass sass-loader css-loader style-loader -D

注意：废弃的node-sass已不再维护，推荐使用sass（dart-sass）。

2. 检查TypeScript配置文件（tsconfig.json）

确保tsconfig.json的include路径覆盖src目录，保证TypeScript能识别到你的声明文件：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "jsx": "react-jsx",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

3. 修正SCSS声明文件内容

如果使用CSS Modules（文件命名如xxx.module.scss），声明文件需改为：

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

如果是非模块化SCSS，原声明declare module '*.scss';有效，但要确保导入路径正确，比如：

import './styles.scss';

避免路径层级错误或漏写文件名。

4. 检查webpack配置（手动配置场景）

若未使用Create React App而是手动配置webpack，需在webpack.config.js中添加SCSS处理规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader', // 将CSS注入DOM
          'css-loader', // 解析CSS中的import和url
          'sass-loader' // 编译SCSS为CSS
        ]
      }
    ]
  }
};

使用CRA则无需手动修改，内置已支持SCSS。