Create React App 添加 Sass 样式表

Sass（Syntactically Awesome Stylesheets）是一种用于编写更简洁、更易维护的 CSS 的预处理器。Create React App 默认支持 Sass，让你可以轻松地在项目中使用 Sass 来管理样式。

安装 Sass

首先，你需要安装 node-sass 和 sass-loader 两个依赖包。在项目根目录下运行以下命令：

npm install node-sass sass-loader

配置 webpack

接着，你需要配置 webpack 来支持 Sass。在项目根目录下找到 webpack 配置文件（通常是 webpack.config.js 或 webpack.config.dev.js），在 module.rules 数组中添加以下配置：

{
  test: /\.s[ac]ss$/i,
  use: ['style-loader', 'css-loader', 'sass-loader'],
}

这段配置告诉 webpack 当遇到以 .scss 或 .sass 结尾的文件时，使用 style-loader、css-loader 和 sass-loader 来处理文件。

创建 Sass 文件

现在你可以在项目中创建 .scss 或 .sass 文件来编写样式。例如，你可以创建一个 styles.scss 文件：

// www.javascriptcn.com code example
$primary-color: #007bff;

.button {
  background-color: $primary-color;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

引入 Sass 文件

最后，在你的组件中引入 Sass 文件。例如，在一个 Button 组件中：

// www.javascriptcn.com code example
import React from 'react';
import './styles.scss';

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

export default Button;

现在你已经成功地在 Create React App 项目中添加了 Sass 支持。开始使用 Sass 来管理你的样式吧！