ts引入scss报红

如果您在使用 TypeScript 时引入了 SCSS 文件并出现了红色的报错提示，可能是因为 TypeScript 默认不支持 SCSS 文件的解析。您可以使用以下两种方法解决这个问题：

1. 安装支持 SCSS 的 TypeScript 解析器

您可以在项目中安装支持 SCSS 文件解析的 TypeScript 解析器，例如 `node-sass` 或 `sass`。安装完成后，在 `tsconfig.json` 中添加以下配置：

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "types": ["node"],
    "allowJs": true,
    "jsx": "react",
    "noImplicitAny": true
  },
  "include": [
    "src/**/*",
    "*.scss"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

这里的 `*.scss` 表示 TypeScript 会解析项目中所有的 SCSS 文件。

2. 使用第三方库解析 SCSS 文件

您也可以使用第三方库来解析 SCSS 文件，例如 `node-sass` 或 `sass-loader`。这些库会将 SCSS 文件转换为 CSS 文件，然后通过 TypeScript 引入 CSS 文件即可。

例如，使用 `sass-loader` 可以在 `webpack.config.js` 中添加以下配置：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader"
          },
          {
            loader: "sass-loader"
          }
        ]
      }
    ]
  }
};

然后在 TypeScript 中引入 CSS 文件即可：

import "./styles.scss";

希望能帮到您！