当前位置：首页 > React

如何在react项目中使用sass

2026-01-26 06:38:32React

安装Sass依赖

在React项目中安装Sass需要添加node-sass或sass包。推荐使用sass，因为它是官方维护的Dart Sass的纯JavaScript实现。

npm install sass
# 或
yarn add sass

创建Sass文件

在项目目录中创建.scss或.sass文件。通常放在src目录下，例如src/styles/main.scss。

// main.scss
$primary-color: #61dafb;

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

导入Sass文件

在React组件中直接导入Sass文件。确保文件路径正确。

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

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

export default App;

使用模块化Sass

为了避免全局样式冲突，可以使用CSS Modules。创建文件名格式为[name].module.scss。

// styles.module.scss
.container {
  margin: 0 auto;
  max-width: 1200px;
}

在组件中导入模块化样式：

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

function Component() {
  return <div className={styles.container}>Content</div>;
}

全局变量与混入

定义全局变量或混入（mixins）时，可以创建一个单独的文件（如_variables.scss），并通过@use或@import在其他文件中引用。

// _variables.scss
$primary-color: #61dafb;
$secondary-color: #282c34;

在需要使用的地方导入：

@use './variables' as vars;

.button {
  background-color: vars.$primary-color;
  color: vars.$secondary-color;
}

嵌套与父选择器

Sass支持嵌套语法和父选择器&，可以简化CSS结构。

.nav {
  display: flex;

  &-item {
    padding: 0.5rem;

    &:hover {
      color: blue;
    }
  }
}

编译与构建

React项目（如Create React App）已内置Sass支持，无需额外配置。运行npm start或yarn start时，Sass文件会自动编译为CSS。

自定义配置

如果需要自定义Sass选项（如输出格式、源映射），可以在项目根目录创建或修改webpack.config.js（需eject或使用react-app-rewired）。

如何在react项目中使用sass

// webpack.config.js片段
{
  test: /\.s[ac]ss$/i,
  use: [
    'style-loader',
    'css-loader',
    {
      loader: 'sass-loader',
      options: {
        implementation: require('sass'),
        sassOptions: {
          outputStyle: 'compressed',
        },
      },
    },
  ],
}