react 如何使用scss
安装必要的依赖
在 React 项目中，需要安装 sass 包来支持 SCSS 编译。可以通过 npm 或 yarn 安装：
npm install sass或
yarn add sass创建 SCSS 文件
在项目中创建一个 .scss 文件，例如 styles.scss，并编写 SCSS 语法：
$primary-color: #3498db;
.button {
background-color: $primary-color;
padding: 10px 20px;
border-radius: 4px;
&:hover {
background-color: darken($primary-color, 10%);
}
}导入 SCSS 文件
在 React 组件中，直接导入 .scss 文件即可使用：
import './styles.scss';
function App() {
return (
<button className="button">Click Me</button>
);
}使用模块化 SCSS
为了避免全局样式冲突，可以使用模块化 SCSS。将文件命名为 [name].module.scss，并通过 import styles from '[name].module.scss' 导入：
// Button.module.scss
.button {
background-color: #3498db;
}import styles from './Button.module.scss';
function App() {
return (
<button className={styles.button}>Click Me</button>
);
}嵌套与变量
SCSS 支持嵌套语法和变量，可以更高效地组织样式：
$spacing: 16px;
.container {
padding: $spacing;
.header {
font-size: 24px;
margin-bottom: $spacing;
}
}使用 Mixin
Mixin 可以复用样式代码：
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.container {
@include flex-center;
height: 100vh;
}编译与构建
React 项目通常使用 react-scripts（如 Create React App），它会自动处理 SCSS 编译。如果使用自定义配置（如 Webpack），需确保配置了 sass-loader。
注意事项
- 确保文件名和类名正确匹配，尤其是模块化 SCSS。
- 避免过度嵌套，以防止样式难以维护。
- 使用变量和 Mixin 提高代码复用性。
