使用 typescript 在 create-react-app 中加载 sass

Posted 2023-03-07

【中文标题】使用 typescript 在 create-react-app 中加载 sass

【英文标题】：loading sass in a create-react-app with typescript

【发布时间】：2019-04-07 11:18:45

【问题描述】：

我最近将一个 create-react-app 迁移到 typescript。迁移后，我的 scss 文件在 .tsx 组件中被忽略。我正在像这样导入文件：

import './styles/scss/style.scss';

这在 js 中运行良好。我已经安装了 node-sass，甚至尝试安装 @types/node-sass。我想在不弹出的情况下执行此操作。将不胜感激。

【问题讨论】：

您是如何将该代码迁移到 typescript 的？

我使用 create-react-app my-app --scripts-version=react-scripts-ts 创建了一个新应用，并将 tsconfig.json、tslint.json 文件移至现有应用.然后只需将 .js 文件更改为 .tsx

你还记得仔细检查 babel/webpack 配置是否知道你正在使用 sass？ （因为create-react-app 没有规定任何特定的 CSS 预处理器。如果您使用的是 sass，那么您需要确保 babel 和/或 webpack 遵循转换和包含使用 sass 定义的 CSS 的过程）

@Mike'Pomax'Kamermans 我在哪里可以找到配置文件？

medium.com/@oreofeolurin/…

【参考方案1】：

根据本文档https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet#docsNav

如果你使用 react-scripts@2.0.0 或更高版本

npm install node-sass

重启并享受。