如何在react项目中使用sass
安装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）。
// webpack.config.js片段
{
test: /\.s[ac]ss$/i,
use: [
'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
implementation: require('sass'),
sassOptions: {
outputStyle: 'compressed',
},
},
},
],
}
