React 使用 Sass

什么是 Sass

Sass 是一个 CSS 预处理器。

Sass 文件在服务器上执行，并将 CSS 发送到浏览器。

您可以在本站的 Sass 教程 了解更多有关 Sass 的知识。

如何使用 Sass?

如果在项目中使用 create-react-app，则可以在 React 项目中轻松安装和使用 Sass。

通过在终端中运行此命令来安装 Sass:

现在，您可以在项目中包含 Sass 文件了！

创建 Sass 文件

创建 Sass 文件的方法与创建 CSS 文件的方法相同，但 Sass 文件的扩展名为 .scss

在 Sass 文件中，可以使用变量和其他 Sass 函数:

my-sass.scss:

创建一个变量来定义文本的颜色:

$myColor: red;
h2 {
  color: $myColor;
}

导入 Sass 文件的方式与导入 CSS 文件的方式相同:

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './my-sass.scss';
const Header = () => {
  return (
    <>
      <h2>Hello Style!</h2>
      <p>Add a little style!.</p>
    </>
  );
}
ReactDOM.render(<Header />, document.getElementById('root'));