如何在 Typescript 和 SASS 中使用 React

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

假设您已成功安装node-sass在 TypeScript create-react-appReact 应用程序中，就像您通过执行以下操作添加/导入 CSS 样式表一样：

import './mystyles.css';

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

import './mystyles.scss';

在您的示例中，您只需要将其视为导入模块仅用于其副作用，而不是像您当前尝试的默认导入。

您还可以通过将 SCSS 文件名更新为 SCSS 文件并将其导入，将其视为SCSS 模块，mystyles.module.scss如下所示：

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

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

1. 使用命令创建了一个 TypeScript create-react-app npx create-react-app my-app --template typescript
2. 导航到创建目录并使用命令安装 node-sass npm install --save 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';.