React+TypeScript项目中SCSS文件出现TS语法报错求助

这些错误的核心原因是TypeScript将SCSS文件错误地识别为TypeScript文件进行语法校验，导致SCSS的语法规则被TS解析器判定为非法。以下是具体的解决方法：

1. 添加SCSS类型声明文件 #

在项目的src目录下创建globals.d.ts（或其他.d.ts声明文件），添加SCSS模块的类型声明，告诉TypeScript如何解析.scss文件：

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

同时确保tsconfig.json的include字段包含这个声明文件：

{
  "compilerOptions": {
    // 其他配置...
    "moduleResolution": "node"
  },
  "include": [
    "src/**/*",
    "src/globals.d.ts"
  ]
}

2. 修正VS Code的文件关联设置 #

如果编辑器错误地将.scss文件关联为TS文件，会持续弹出错误提示。打开VS Code设置（快捷键Ctrl+,），搜索files.associations，添加或修改如下配置：

"files.associations": {
  "*.scss": "scss"
}

3. 确保SCSS处理依赖安装完整 #

安装必要的SCSS编译依赖，避免因依赖缺失导致的解析异常：

npm install sass sass-loader @types/node --save-dev

如果是Create React App创建的项目，默认已支持SCSS，但仍需确保sass依赖已正确安装（CRA不再支持node-sass）。

4. 检查Webpack配置（自定义构建时） #

如果项目使用自定义Webpack配置，需确认SCSS处理规则正确配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader', // 生产环境可替换为 MiniCssExtractPlugin.loader
          'css-loader',
          'sass-loader'
        ],
        exclude: /node_modules/
      }
    ]
  }
};

以上步骤可以解决TypeScript对SCSS文件的错误解析问题，消除Expression expected.ts(1109)、, expected.ts(1005)`以及变量未找到的报错。

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