css - 如果我们使用 SASS，应该在 react tsx 中导入哪些文件？

Question

我对在 React TypeScript 元素中使用 SASS/SCSS 有点困惑。我发现一篇文章说如何在 React 元素中使用 SASS/SCSS:https://create-react-app.dev/docs/adding-a-sass-stylesheet尽管在 .tsx 组件文件中导入 .scss 文件似乎工作得很好，就像这样:

import './component-1.scss';

但是构建scss 文件并将它们编译为css 又如何呢？如果浏览器可以理解 scss 文件，我们为什么需要它。还是我在这里理解错了？如果需要编译 scss 文件，我们应该在组件中导入 compiled css 文件，例如:

import './component-1.css';

那么在编译之前我将如何实现这一点，因为目录中只会存在 scss 文件。

Answer 1

浏览器不理解 SCSS。构建应用程序时，SCSS 将转换为 CSS。这些 SCSS 文件导入基本上会被转译到您的应用程序中，以导入浏览器随后使用的常规旧 CSS。

源文件中的代码不表示构建过程的输出结果。就像我们可以使用 JSX 编写 React 文件一样，但是当我们构建应用程序时，它会转换为常规的旧 JS，因为浏览器不理解 JSX。