react 如何用好 scss

在 React 中高效使用 SCSS

安装 SCSS 依赖 确保项目已安装 node-sass 或 sass。通过以下命令安装：

npm install sass --save-dev

文件命名与结构 将 SCSS 文件与组件关联，例如 Button.module.scss 对应 Button.jsx。使用模块化命名避免样式冲突：

// Button.module.scss
.button {
  background: #3498db;
  &:hover {
    background: #2980b9;
  }
}

在组件中引入 SCSS 通过模块化方式引入，类名会被自动哈希化：

import styles from './Button.module.scss';

function Button() {
  return <button className={styles.button}>Click</button>;
}

变量与混合宏 利用 SCSS 的变量和混合宏提升复用性：

// _variables.scss
$primary-color: #3498db;

// Button.module.scss
@import './variables';
.button {
  background: $primary-color;
}

嵌套与父选择器 合理使用嵌套和 & 符号简化层级：

.card {
  border: 1px solid #ddd;
  &-header {
    font-size: 1.2rem;
  }
}

全局样式管理 在 index.scss 中定义全局样式，并在入口文件引入：

// index.scss
body {
  margin: 0;
  font-family: Arial;
}

响应式设计 使用 SCSS 变量管理断点，结合混合宏实现响应式：

$breakpoint-md: 768px;

@mixin respond-to($breakpoint) {
  @media (min-width: $breakpoint) {
    @content;
  }
}

.sidebar {
  width: 100%;
  @include respond-to($breakpoint-md) {
    width: 250px;
  }
}

样式覆盖与继承 通过 @extend 实现样式继承，减少重复代码：

.error {
  border: 1px solid red;
}

.warning {
  @extend .error;
  border-color: yellow;
}

性能优化 避免过度嵌套（不超过 3 层），拆分大文件为多个部分文件（_partial.scss），并通过 @use 引入。

工具链集成 结合 postcss 和 autoprefixer 自动添加浏览器前缀，通过 cssnano 压缩生产环境代码。

调试技巧 使用 sourceMap 选项在开发者工具中直接定位 SCSS 源文件：

// webpack.config.js
{
  loader: 'sass-loader',
  options: {
    sourceMap: true,
  },
}