在 React 项目中配置 SCSS 样式

问题概述

当开始学习 React 并构建第一个项目时，许多开发者希望使用熟悉的 CSS/SCSS 来添加样式。SCSS 作为 CSS 的预处理器，提供了变量、嵌套、混合等强大功能，能够显著提高样式开发效率。

本文将详细介绍如何在 React 项目中正确配置和使用 SCSS。

解决方案

使用 Create React App (CRA) 项目

对于大多数 React 初学者和标准项目，Create React App 是最简单直接的解决方案。

什么是 Create React App？

Create React App 是 React 官方推荐的脚手架工具，提供了零配置的开发环境，让开发者能够快速开始 React 项目开发。

步骤 1：安装 sass 依赖

首先，确保你已创建了 React 项目。然后在项目根目录下运行以下命令：

npm

npm install sass --save-dev

yarn

yarn add sass --dev

注意

不再推荐使用 node-sass，因为它已被官方弃用。现在应该使用 sass（Dart Sass）作为替代方案。

步骤 2：重命名 CSS 文件

将项目中现有的 .css 文件重命名为 .scss 或 .sass 扩展名：

App.css    →   App.scss
index.css  →   index.scss

步骤 3：更新导入语句

在相应的 JavaScript/React 组件中更新导入语句：

// 将原来的 CSS 导入
import './App.css';

// 改为 SCSS 导入
import './App.scss';

步骤 4：使用 SCSS 功能

现在你可以在 SCSS 文件中使用所有 Sass 特性：

// 定义变量
$primary-color: #3498db;
$font-size: 16px;

// 嵌套规则
.button {
  background-color: $primary-color;
  padding: 10px 20px;
  
  &:hover {
    background-color: darken($primary-color, 10%);
  }
  
  // 使用混合（Mixin）
  @include border-radius(5px);
}

// 创建混合
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

自定义 Webpack 配置的高级方案

如果你需要对构建过程有更多控制权，可以考虑使用以下工具：

react-app-rewired

npm install react-app-rewired --save-dev

craco

npm install @craco/craco --save-dev

这些工具允许你修改 Webpack 配置而无需执行 eject 操作，但请注意这增加了项目的复杂度，不适合初学者。

项目结构建议

为了更好的代码组织，建议采用以下目录结构：

src/
  components/
    Button/
      Button.js
      Button.scss
  scss/
    _variables.scss
    _mixins.scss
    _functions.scss
  App.scss
  index.scss

在组件中导入局部样式：

import React from 'react';
import './Button.scss'; // 导入组件的样式

const Button = ({ children }) => {
  return <button className="button">{children}</button>;
};

export default Button;

在主要 SCSS 文件中导入全局样式工具：

// App.scss
@import './scss/variables';
@import './scss/mixins';
@import './scss/functions';

// 其他全局样式...

常见问题解答

为什么选择 Sass 而不是 node-sass？

Dart Sass 现在是官方主要维护的版本，性能更好且与未来特性的兼容性更强。node-sass 依赖于 LibSass，后者已停止维护。

是否需要执行 eject？

不需要。使用 npm install sass --save-dev 就足够了，Create React App 内置了对 Sass 的支持。

可以同时使用 CSS 和 SCSS 文件吗？

可以，React 项目支持混合使用不同的样式文件类型，但建议保持一致性。

总结

在 React 项目中添加 SCSS 支持非常简单：

1. 安装 sass 开发依赖
2. 将 .css 文件重命名为 .scss
3. 更新组件中的导入语句
4. 开始享受 SCSS 的强大功能

对于大多数项目，使用 Create React App 加上 sass 依赖是最佳选择，无需复杂配置即可获得完整的 SCSS 功能支持。