react如何使用sass
安装 Sass 依赖
在 React 项目中安装 sass 作为开发依赖：
npm install sass --save-dev创建 Sass 文件
新建 .scss 或 .sass 文件，例如 styles.scss：
$primary-color: #61dafb;
.container {
background-color: $primary-color;
padding: 20px;
}在组件中引入 Sass 文件
在 React 组件中直接导入 Sass 文件：
import './styles.scss';
function App() {
return <div className="container">Hello, Sass!</div>;
}使用模块化 Sass（可选）
为 Sass 文件添加 .module.scss 后缀以实现模块化：
/* styles.module.scss */
.title {
color: red;
}在组件中通过模块化方式引用：
import styles from './styles.module.scss';
function App() {
return <h1 className={styles.title}>Module Sass</h1>;
}全局变量共享（可选）
在 vite.config.js 或 webpack.config.js 中配置全局变量：
// vite 配置示例
export default {
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "./src/styles/variables.scss";`
}
}
}
};嵌套与混合（高级用法）
Sass 支持嵌套规则和混合（Mixins）：
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.card {
@include flex-center;
border: 1px solid #ccc;
&:hover {
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
}
