react如何使用sass
安装 Sass 依赖
在 React 项目中安装 sass 作为开发依赖。运行以下命令：
npm install sass --save-dev或使用 Yarn：
yarn add sass --dev创建 Sass 文件
在项目目录中创建一个 .scss 或 .sass 文件。例如：
// styles.scss
$primary-color: #3498db;
.container {
background-color: $primary-color;
padding: 20px;
}导入 Sass 文件
在 React 组件中直接导入 Sass 文件：
import './styles.scss';
function App() {
return (
<div className="container">
Hello, Sass!
</div>
);
}使用模块化 Sass
为了支持 CSS 模块化，将 Sass 文件命名为 [name].module.scss，并通过模块化语法引入：
// styles.module.scss
.button {
background-color: #2ecc71;
color: white;
}在组件中使用：
import styles from './styles.module.scss';
function App() {
return (
<button className={styles.button}>
Click Me
</button>
);
}配置全局变量
创建全局变量文件（如 _variables.scss），并在其他 Sass 文件中通过 @use 或 @import 引入：
// _variables.scss
$primary-color: #3498db;在组件样式文件中使用：
@use './variables' as vars;
.header {
color: vars.$primary-color;
}启用 Sass 高级功能
在 create-react-app 或类似脚手架中，Sass 默认支持嵌套、混合（Mixins）等高级功能。例如：
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.box {
@include flex-center;
height: 100px;
}
