当前位置：首页 > React

react如何使用sass

2026-02-26 15:04:07React

安装必要的依赖

在React项目中使用Sass需要安装node-sass或sass（推荐使用sass，它是node-sass的替代品，性能更好）。通过以下命令安装：

npm install sass --save-dev
# 或
yarn add sass --dev

创建Sass文件

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

$primary-color: #61dafb;

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

在组件中引入Sass文件

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

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

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

export default App;

使用Sass模块化

如果需要模块化样式以避免全局污染，可以将Sass文件命名为[name].module.scss，并通过模块化方式引入：

react如何使用sass

// styles.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, Sass!</h1>
    </div>
  );
}

export default App;

配置Sass全局变量

如果需要全局共享Sass变量，可以在create-react-app项目中通过SASS_PATH环境变量配置。在项目根目录创建.env文件并添加：

react如何使用sass

SASS_PATH=./src/styles

然后在src/styles目录下创建_variables.scss文件：

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

在其他Sass文件中引入：

@import 'variables';

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

使用Sass的高级功能

Sass支持嵌套、混合（Mixins）、继承等功能。例如：

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

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