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

【问题标题】：Which files should be imported in react tsx if we are using SASS?如果我们使用 SASS，应该在 react tsx 中导入哪些文件？
【发布时间】：2020-07-27 09:58:25
【问题描述】：

我对在 react typescript 项目中使用 SASS/SCSS 有点困惑。我发现一篇文章说SASS/SCSS 可以在 React 项目中使用：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 文件。

【问题讨论】：

标签： css reactjs sass node-sass react-typescript

【解决方案1】：

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

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

【讨论】：

在这种情况下，应该在.tsx文件中导入什么？
假设将 SCSS 转换为 CSS 是应用程序构建过程的一部分，那么您的源代码应该导入 SCSS 文件
如果我使用webpack将scss文件编译成css，react项目的build会包含css文件还是scss文件内容？然后应该将哪些文件上传到服务器？
如果您使用create-react-app，那么它可能已经为您处理好了，但是如果您有自己的自定义 webpack 设置，那么您需要一个用于 SCSS 文件的加载器。此加载器将获取您import 的 SCSS 文件并将编译后的 CSS 添加到构建的应用程序中。这是常见的：webpack.js.org/loaders/sass-loader

【解决方案2】：

我们的做法是使用 CSS 预处理器（如 SASS 或 LESS）来简化开发过程。浏览器不理解它们。我们有两种方法可以将它们编译成 CSS 文件：

使用像 Gulp 和 Grunt 这样的任务运行程序或像 Webpack 这样的捆绑程序（使用适当的加载程序）。
使用Koala等软件手动编译（开发过程中不推荐）

如果你正在使用 Webpack 或其他打包工具，你所要做的就是导入 sass 文件，添加适当的加载器（如果是 Webpack，则为 sass-loader），然后让 Webpack 为你完成剩下的工作。 Webpack 将负责编译和打包。

【讨论】：

我明白，但是如果我编译 scss 以将 css 存储在单独的目录中，我应该在我的 tsx 文件中导入什么？
正如我上面提到的，这完全取决于您的构建过程是如何工作的，如果您使用的是捆绑器，则捆绑的编译后的 css 将在构建后进入 dist 或 build 文件夹。