如果我们使用 SASS，应该在 react tsx 中导入哪些文件？
Which files should be imported in react tsx if we are using SASS?
我对在 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 文件。
浏览器不理解 SCSS。构建应用程序时，SCSS 会转换为 CSS。这些 SCSS 文件导入基本上会被转译到您的应用程序中，以导入浏览器随后使用的常规旧 CSS。
源文件中的代码不是表示构建过程输出的样子。就像我们可以使用 JSX 编写 React 文件一样，但是当我们构建应用程序时，它会转换为常规的旧 JS，因为浏览器不理解 JSX。
我们的做法是使用 CSS 预处理器，如 SASS 或 LESS 来简化开发过程。浏览器不理解它们。我们有两种方法可以将它们编译成 CSS 个文件：
- 使用像
Gulp 和 Grunt 这样的任务运行器或像 Webpack 这样的打包器（使用适当的加载器）。
- 使用类似
Koala的软件手动编译它们（在开发过程中不推荐）
如果你正在使用 Webpack 或其他打包器，你所要做的就是导入 sass 文件，添加适当的加载器（sass-loader 在 Webpack 的情况下），然后让 Webpack 做剩下的给你。 Webpack 将负责编译和打包。
我对在 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 文件。
浏览器不理解 SCSS。构建应用程序时，SCSS 会转换为 CSS。这些 SCSS 文件导入基本上会被转译到您的应用程序中，以导入浏览器随后使用的常规旧 CSS。
源文件中的代码不是表示构建过程输出的样子。就像我们可以使用 JSX 编写 React 文件一样，但是当我们构建应用程序时，它会转换为常规的旧 JS，因为浏览器不理解 JSX。
我们的做法是使用 CSS 预处理器，如 SASS 或 LESS 来简化开发过程。浏览器不理解它们。我们有两种方法可以将它们编译成 CSS 个文件：
- 使用像
Gulp和Grunt这样的任务运行器或像Webpack这样的打包器（使用适当的加载器）。 - 使用类似
Koala的软件手动编译它们（在开发过程中不推荐）
如果你正在使用 Webpack 或其他打包器，你所要做的就是导入 sass 文件，添加适当的加载器（sass-loader 在 Webpack 的情况下），然后让 Webpack 做剩下的给你。 Webpack 将负责编译和打包。