在 React 应用程序中使用 SCSS

随着时间的流逝，Web 应用程序变得越来越复杂。它们的功能和外观都是如此。

几乎所有企业都了解其互联网存在的重要性，因此他们愿意开发具有出色设计的网站。

为了开发漂亮的网站，开发人员需要开发和维护包含应用程序外观信息的模板。例如，它可能会为设计应用程序指定主要颜色和次要颜色以及类似的重要值。

所有这些都可以通过常规 CSS 实现，但使用 SCSS 更容易，它扩展了 CSS 的所有基本功能，可以更有效地管理模板。React 也是为现代应用程序开发 UI 的最常用库之一。

在本文中，我们想探索如何将 SCSS 与 React 结合使用。

在 React 中使用带有 Create-React-App 的 SCSS

在 React 中使用 SCSS 最简单的方法是创建一个 create-react-app 项目。它包含一个配置为允许你编译 SCSS 文件的 webpack 文件。

根据官方 create-react-app 文档，首先，你必须使用 npm 或 yarn 等软件包管理器来安装 sass 软件包。然后你可以继续将样式表的文件扩展名从常规的 style.css 更改为 style.scss。

在 Create-React-App 应用程序的文件中导入的任何文件都将自动编译为常规 CSS。

让我们看一个例子。

import "./styles.scss";
export default function App() {
  return (
    <div className="App">
      <h1>Hello, World</h1>
    </div>
  );
}

当你导入 styles.scss 文件时，将自动编译任何特定于 SCSS 的功能。

假设你要在 create-react-app 项目之外导入和使用 SCSS 文件。你将需要设置一个 webpack 文件来配置编译规则。

要了解更多信息，请阅读 dev.to 上的这个教程。