react如何使用sass
安装 Sass 依赖
在 React 项目中安装 sass 作为开发依赖：
npm install sass --save-dev或使用 Yarn：
yarn add sass --dev创建 Sass 文件
在项目中创建 .scss 或 .sass 文件，例如 styles.scss：
$primary-color: #61dafb;
.app {
background-color: $primary-color;
}导入 Sass 文件
在 React 组件中直接导入 Sass 文件：
import './styles.scss';
function App() {
return <div className="app">Hello, Sass!</div>;
}使用模块化 Sass
若需模块化样式，可创建 [name].module.scss 文件，并通过 className 引用：
// styles.module.scss
.button {
background: #ff0000;
}在组件中使用：
import styles from './styles.module.scss';
function Button() {
return <button className={styles.button}>Click</button>;
}配置全局变量
通过 sass-loader 配置全局变量（需修改 Webpack 配置，适用于 create-react-app 需 eject 或使用 craco）：
// webpack.config.js 或 craco.config.js
{
loader: 'sass-loader',
options: {
additionalData: `@import 'src/styles/variables';`,
},
}嵌套与混合（Mixins）
利用 Sass 特性如嵌套和混合：
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.container {
@include flex-center;
.item {
color: blue;
}
}注意事项
- 无需额外配置：
create-react-app已内置 Sass 支持，安装sass即可。 - 路径别名：若使用路径别名（如
@/），需确保 Sass 文件中的路径解析正确。 - 性能优化：避免过度嵌套，防止生成的 CSS 文件过大。
