当前位置：首页 > React

react如何使用sass

2026-03-31 08:25:04React

安装 Sass 依赖

在 React 项目中安装 sass 作为开发依赖：

npm install sass --save-dev

创建 Sass 文件

新建 .scss 或 .sass 文件，例如 styles.scss：

$primary-color: #61dafb;

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

在组件中引入 Sass 文件

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

react如何使用sass

import './styles.scss';

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

使用模块化 Sass（可选）

为 Sass 文件添加 .module.scss 后缀以实现模块化：

/* styles.module.scss */
.title {
  color: red;
}

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

react如何使用sass

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

function App() {
  return <h1 className={styles.title}>Module Sass</h1>;
}

全局变量共享（可选）

在 vite.config.js 或 webpack.config.js 中配置全局变量：

// vite 配置示例
export default {
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/styles/variables.scss";`
      }
    }
  }
};

嵌套与混合（高级用法）

Sass 支持嵌套规则和混合（Mixins）：

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

.card {
  @include flex-center;
  border: 1px solid #ccc;

  &:hover {
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
  }
}