react 如何引入sass

安装 Sass 依赖

在 React 项目中安装 sass 依赖包。通过 npm 或 yarn 安装：

npm install sass
# 或
yarn add sass

创建 Sass 文件

在项目目录中创建一个 .scss 或 .sass 文件。例如，创建一个名为 styles.scss 的文件：

$primary-color: #61dafb;

.header {
  background-color: $primary-color;
  padding: 1rem;
}

在组件中引入 Sass 文件

在 React 组件中直接引入 Sass 文件。例如，在 App.js 中引入：

import './styles.scss';

function App() {
  return (
    <div className="header">
      Hello, Sass!
    </div>
  );
}

使用模块化 Sass（可选）

如果需要模块化样式，可以创建 .module.scss 文件。例如，创建 styles.module.scss：

.primary {
  color: #61dafb;
}

在组件中通过模块化方式引入：

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

function App() {
  return (
    <div className={styles.primary}>
      Hello, Module Sass!
    </div>
  );
}

配置全局 Sass 变量（可选）

若需全局共享变量，可在 src 目录下创建 _variables.scss 文件：

$primary-color: #61dafb;
$secondary-color: #282c34;

在其他 Sass 文件中通过 @use 或 @import 引入：

@use './variables' as *;

.header {
  background-color: $primary-color;
}

注意事项

• 确保项目使用的是 React 16+ 版本，旧版本可能需要额外配置。
• 若使用 Create React App，无需额外配置，直接安装 sass 即可。
• 自定义 Webpack 配置的项目需确保已配置 Sass 加载器。