当前位置：首页 > React

react中如何使用sass

2026-03-11 06:50:07React

安装 Sass 依赖

在 React 项目中使用 Sass 需要先安装 node-sass 或 sass（官方推荐）。通过 npm 或 yarn 安装：

npm install sass
# 或
yarn add sass

创建 Sass 文件

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

$primary-color: #61dafb;

.container {
  background-color: $primary-color;
  padding: 20px;
}

在组件中引入 Sass 文件

在 React 组件中直接引入 Sass 文件：

import React from 'react';
import './styles.scss';

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

export default App;

使用模块化 Sass

为了避免全局样式冲突，可以使用 CSS Modules。将 Sass 文件命名为 [name].module.scss：

$primary-color: #61dafb;

.container {
  background-color: $primary-color;
  padding: 20px;
}

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

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

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

export default App;

配置全局 Sass 变量

如果需要全局共享 Sass 变量，可以在 src 目录下创建 _variables.scss 文件：

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

在其他 Sass 文件中引入：

@import './variables';

.container {
  background-color: $primary-color;
  color: $secondary-color;
}

使用 Sass 嵌套和混合

Sass 支持嵌套和混合功能，可以简化样式编写：

react中如何使用sass

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  @include flex-center;
  background-color: $primary-color;

  &:hover {
    opacity: 0.8;
  }
}