reactjs - 如何将 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";

但我收到错误

Cannot find module "./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 Module将 SCSS 文件名更新为 mystyles.module.scss并按如下方式导入:

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'; .