react 如何使用scss
在 React 中使用 SCSS
安装依赖
确保项目已安装 node-sass 或 sass。现代 React 项目推荐使用 sass（Dart Sass）。运行以下命令安装：
npm install sass
# 或
yarn add sass创建 SCSS 文件
在组件目录下创建 .scss 文件，例如 App.scss。编写 SCSS 语法：
$primary-color: #61dafb;
.app {
background-color: $primary-color;
&-header {
font-size: 2rem;
}
}导入 SCSS 文件
在 React 组件中直接导入 SCSS 文件：
import React from 'react';
import './App.scss';
function App() {
return (
<div className="app">
<h1 className="app-header">Hello SCSS</h1>
</div>
);
}使用模块化 SCSS
为避免类名冲突，可使用 CSS Modules。将文件命名为 [name].module.scss，并通过 styles 对象访问类名：
import styles from './App.module.scss';
function App() {
return (
<div className={styles.app}>
<h1 className={styles.appHeader}>Hello Modular SCSS</h1>
</div>
);
}嵌套与变量
SCSS 支持嵌套规则和变量，提升代码可维护性：
// variables.scss
$spacing-unit: 8px;
// mixins.scss
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
// App.scss
@import './variables';
@import './mixins';
.container {
@include flex-center;
padding: $spacing-unit * 2;
}自动前缀
通过构建工具（如 Create React App）自动添加浏览器前缀，无需手动处理。如需自定义配置，可修改 package.json 或使用 postcss。
调试与扩展
- 使用
@debug输出变量值辅助调试。 - 通过
@extend共享样式规则：.error { border: 1px solid red; } .critical-error { @extend .error; font-weight: bold; }
构建优化
生产环境下，CSS 会被自动压缩。如需进一步优化，可配置 sass-loader 的 outputStyle 为 compressed。
