如何将 React 与 Typescript 和 SASS 一起使用

Question

我正在使用 create-react-app 引导我的应用程序，并且我想使用 Typescript 和 SASS 进行开发。我之前一直在使用 Angular，我可以像这样轻松引用 SASS 文件：

@Component({
  selector: 'unit-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  providers: []
})

在 React 中，我尝试像这样导入 SASS 文件：

import s from "./mystyles.scss";

但我得到了错误

找不到模块“./mystyles.scss”

。 如何将 SASS 文件导入 .tsx 文件？

Answer 1

假设您已在 TypeScript create-react-app React 应用程序中成功安装 node-sass，就像您通过执行以下操作 Add/import a CSS stylesheet 一样：

import './mystyles.css';

对于 SCSS 样式表，您只需更改文件类型：

import './mystyles.scss';

在您的示例中，您只需将其视为 Import a module for its side effects only 而不是您当前尝试的默认导入。

您还可以通过将 SCSS 文件名更新为 mystyles.module.scss 并将其导入如下来将其视为 SCSS Module：

import styles as './mystyles.module.scss';

由于react-scripts@2.0.0 和更高版本的项目默认内置了 Sass/SCSS 支持，因此我能够实现以下两项功能：

1. 使用命令 npx create-react-app my-app --template typescript 创建了一个 TypeScript create-react-app
2. 导航到创建 目录并使用命令 npm install --save node-sass 安装 node-sass
3. 将默认生成的App.css 更改为App.scss
4. 将App.tsx 中的导入从import './App.css'; 更改为import './App.scss';

确保您已安装 node-sass。如果这没有帮助，您可能需要重新审视您如何创建/转换您的 create-react-app 以使用 TypeScript。

您需要将其导入为import './mystyles.scss'; 或将module 实际放在文件名中并将其导入为import whatever from './mystyles.module.scss';。