如何在 React 中使用 Sass

Sass（语法很棒的样式表）是 CSS 的扩展，具有使其更强大的附加功能。Sass 最好的一点是它与 CSS 的兼容性，这意味着您可以在 Web 开发项目中使用 React 等 JavaScript 框架。

然而，与普通 CSS 不同，您需要进行一些设置才能使用 Sass。通过设置一个简单的 React.js 项目并将 Sass 与其集成来了解其工作原理。

如何在 React.js 项目中使用 Sass

与其他 CSS 处理器一样，React 本身并不支持 Sass。要在React中使用Sass，您需要通过yarn或npm等包管理器安装第三方依赖项。

您可以通过运行npm --version或yarn --version检查本地计算机上是否安装了 npm 或yarn 。如果您在终端中没有看到版本号，请先安装npm或yarn。

创建一个 React.js 项目

要遵循本指南，您可以使用 create-react-app 设置一个简单的 React.js 应用程序。

首先，使用命令行导航到要创建 React 项目的文件夹。然后运行​​npx create-react-app <appname>；这个过程可能需要一段时间。完成后，使用cd <appname>进入应用程序目录。将以下内容添加到您的App.js文件中作为启动项：

import React from "react"; 
import "./App.css"; 
function App() { 
return ( 
 <div className="wrapper"> 
  <h1>Using Sass in React</h1> 
  <header className="wrapper__btns"> 
   <button>Blue Button</button> 
   <button>Red Button</button> 
   <button>Green Button</button> 
  </header> 
 </div> ); 
} 
export default App;

一旦你建立了一个基本的 React 项目，就可以集成 Sass 了。

安装 Sass

您可以通过npm 或yarn 安装Sass。通过运行yarn add sass通过yarn 安装它，或者，如果您喜欢npm，运行npm install sass。您的包管理器会将最新版本的 Sass 添加到项目的package.json文件中的依赖项列表中。

将 .css 文件重命名为 .scss 或 .sass

在项目的文件夹中，将App.css和index.css分别重命名为App.scss和index.scss。

重命名这些文件后，您需要更新 App.js 和 index.js 文件中的导入以匹配新的文件扩展名，如下所示：

import "./index.scss";
import "./App.scss";

从现在开始，您应该对您创建的任何样式文件使用 .scss 扩展名。

导入和使用变量和混入

Sass最显着的优点之一是它可以帮助您使用变量和 mixin 编写干净、可重用的样式。虽然如何在 React 中执行相同操作可能并不明显，但它与在使用纯 JavaScript 和 HTML 编写的项目中使用 Sass 并没有太大不同。

你不需要在 React 中使用 sass 来在样式中使用变量。CSS 内置了对变量的支持。

首先，在src文件夹中创建一个新的Styles文件夹。在 Styles 文件夹中，创建两个文件：_variables.scss和_mixins.scss。将以下规则添加到 _variables.scss：

$background-color: #f06292;
$text-color: #f1d3b3;
$btn-width: 120px;
$btn-height: 40px;
$block-padding: 60px;

并将以下内容添加到 _mixins.scss 中：

@mixin vertical-list {
    display: flex;
    align-items: center;
    flex-direction: column;
}

然后在 App.scss 中导入变量和 mixin，如下所示：

@import "./Styles/variables";
@import "./Styles/mixins";

在 App.scss 文件中使用变量和 mixin：

@import "./Styles/variables.scss";
@import "./Styles/mixins";
.wrapper {
  background-color: $background-color;
  color: $text-color;
  padding: $block-padding;

  &__btns {
    @include vertical-list;
    button {
      width: $btn-width;
      height: $btn-height;
    }
   }
}

这就是在 React 中使用变量和 mixins 的方式。除了 mixins 和变量之外，您还可以使用 Sass 中所有其他很棒的功能，例如函数。只要你在 React 项目中设置了 scss 就没有限制。

在 React.js 中使用 Sass

Sass 在 CSS 之上提供了更多功能，这正是您编写可重用 CSS 代码所需要的。

您可以开始在 React 中使用 Sass，方法是通过 npm 或 yarn 安装 sass 包，将 CSS 文件更新为 .scss 或 .sass，然后更新导入以使用新的文件扩展名。之后，你就可以开始在React中编写SCSS了。