react中如何使用sass
安装 Sass 依赖
在 React 项目中使用 Sass 需要安装 sass 包。通过 npm 或 yarn 安装：
npm install sass或
yarn add sass创建 Sass 文件
在项目中创建 .scss 或 .sass 文件。例如，创建一个名为 styles.scss 的文件：
$primary-color: #61dafb;
.header {
background-color: $primary-color;
padding: 1rem;
}导入 Sass 文件
在 React 组件中直接导入 Sass 文件：
import React from 'react';
import './styles.scss';
function App() {
return (
<div className="header">
Hello, Sass!
</div>
);
}
export default App;使用模块化 Sass
如果需要模块化样式以避免全局污染，可以将文件命名为 [name].module.scss，并通过模块化方式导入：
// styles.module.scss
.container {
margin: 0 auto;
max-width: 1200px;
}import React from 'react';
import styles from './styles.module.scss';
function App() {
return (
<div className={styles.container}>
Content goes here.
</div>
);
}
export default App;嵌套与变量
Sass 支持嵌套规则和变量，可以更高效地编写样式：
$theme-colors: (
primary: #61dafb,
secondary: #282c34
);
.button {
padding: 0.5rem 1rem;
border: none;
&.primary {
background-color: map-get($theme-colors, primary);
}
&.secondary {
background-color: map-get($theme-colors, secondary);
color: white;
}
}使用 Mixin
Mixin 可以复用样式代码：
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.card {
@include flex-center;
height: 200px;
}编译与构建
React 项目通常使用 create-react-app 或类似工具，已内置对 Sass 的支持，无需额外配置。运行 npm start 或 yarn start 时，Sass 文件会自动编译为 CSS。
