react 如何引入sass
安装依赖
在React项目中引入Sass需要安装node-sass或sass（推荐后者）。通过npm或yarn安装：
npm install sass
# 或
yarn add sass创建Sass文件
在项目目录中创建.scss或.sass文件，例如styles.scss。Sass支持嵌套规则、变量等高级特性：
$primary-color: #61dafb;
.app {
background: $primary-color;
.header {
font-size: 2rem;
}
}在组件中引入
直接在React组件中通过import引入Sass文件。确保文件路径正确：
import './styles.scss';
function App() {
return <div className="app">Hello Sass</div>;
}配置模块化Sass（可选）
若需使用模块化的Sass（避免全局样式冲突），将文件命名为[name].module.scss，并通过对象引用类名：
import styles from './App.module.scss';
function App() {
return <div className={styles.app}>Module Sass</div>;
}启用Sass变量共享（高级）
通过create-react-app的SASS_PATH环境变量或Webpack配置共享全局变量。例如，在package.json中添加：
"scripts": {
"start": "SASS_PATH=./src/styles react-scripts start"
}注意事项
- 确保React版本支持Sass（
create-react-app2.0+默认支持）。 - 若使用自定义Webpack配置，需手动添加Sass加载器规则。
- 生产构建时，样式会自动压缩并提取为CSS文件。
