使用 Sass 样式化 React
什么是 Sass
Sass 是一种 CSS 预处理器。
Sass 文件在服务器上执行，并将 CSS 发送到浏览器。
您可以在我们的 Sass 教程 中了解更多关于 Sass 的信息。
我可以使用 Sass 吗？
如果您在项目中使用 create-react-app，则可以轻松地在 React 项目中安装和使用 Sass。
通过在终端中运行以下命令来安装 Sass
npm i sass
现在您已准备好将 Sass 文件包含到您的项目中！
创建 Sass 文件
创建 Sass 文件的方式与创建 CSS 文件的方式相同，但 Sass 文件的文件扩展名为 .scss
在 Sass 文件中，您可以使用变量和其他 Sass 函数
示例
my-sass.scss
创建一个变量来定义文本的颜色
$myColor: red;
h1 {
color: $myColor;
}导入 Sass 文件的方式与导入 CSS 文件的方式相同
示例
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './my-sass.scss';
const Header = () => {
return (
<>
<h1>Hello Style!</h1>
<p>Add a little style!.</p>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);
