如何在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-app React应用程序中的安装，就像通过以下操作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 --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';。

希望有帮助！