react中如何使用sass

安装 Sass 依赖

在 React 项目中使用 Sass 需要安装 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 文件：

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

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

export default App;

使用模块化 Sass

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

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

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

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

export default App;

嵌套与变量

Sass 支持嵌套规则和变量，可以更高效地编写样式：

$theme-colors: (
  primary: #61dafb,
  secondary: #282c34
);

.button {
  padding: 0.5rem 1rem;
  border: none;

  &.primary {
    background-color: map-get($theme-colors, primary);
  }

  &.secondary {
    background-color: map-get($theme-colors, secondary);
    color: white;
  }
}

使用 Mixin

Mixin 可以复用样式代码：

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

.card {
  @include flex-center;
  height: 200px;
}

编译与构建

React 项目通常使用 create-react-app 或类似工具，已内置对 Sass 的支持，无需额外配置。运行 npm start 或 yarn start 时，Sass 文件会自动编译为 CSS。