react 如何引入sass
安装 Sass 依赖
在 React 项目中安装 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 文件。例如，在 App.js 中引入：
import './styles.scss';
function App() {
return (
<div className="header">
Hello, Sass!
</div>
);
}使用模块化 Sass（可选）
如果需要模块化样式，可以创建 .module.scss 文件。例如，创建 styles.module.scss：
.primary {
color: #61dafb;
}在组件中通过模块化方式引入：
import styles from './styles.module.scss';
function App() {
return (
<div className={styles.primary}>
Hello, Module Sass!
</div>
);
}配置全局 Sass 变量（可选）
若需全局共享变量，可在 src 目录下创建 _variables.scss 文件：
$primary-color: #61dafb;
$secondary-color: #282c34;在其他 Sass 文件中通过 @use 或 @import 引入：
@use './variables' as *;
.header {
background-color: $primary-color;
}注意事项
- 确保项目使用的是 React 16+ 版本，旧版本可能需要额外配置。
- 若使用 Create React App，无需额外配置，直接安装
sass即可。 - 自定义 Webpack 配置的项目需确保已配置 Sass 加载器。
