react的scss如何配置
配置React项目以支持SCSS
在React项目中配置SCSS需要安装相关依赖并调整配置文件。以下是具体步骤：
安装node-sass或sass（推荐后者）
npm install sass --save-dev
# 或
yarn add sass -D创建SCSS文件结构
在src目录下创建styles文件夹，存放SCSS文件：
src/
styles/
_variables.scss
_mixins.scss
main.scss导入SCSS文件
在React组件中直接导入SCSS文件：
import './styles/main.scss';模块化SCSS（可选）
要使用CSS Modules，将SCSS文件命名为[name].module.scss：
import styles from './Button.module.scss';
function Button() {
return <button className={styles.primary}>Click</button>;
}自定义配置（如需修改默认设置）
在webpack.config.js中添加SCSS规则（Create React App项目需先执行npm run eject）：
{
test: /\.s[ac]ss$/i,
use: [
'style-loader',
'css-loader',
'sass-loader',
],
}全局变量注入
通过sass-loader的附加配置注入全局变量：
{
loader: 'sass-loader',
options: {
additionalData: `@import "~@/styles/_variables.scss";`
}
}生产环境优化
安装并配置cssnano等工具优化生成的CSS：
npm install cssnano postcss --save-dev注意事项
- Create React App 2.0+版本已内置SCSS支持，无需额外配置
- 使用CSS Modules时类名会自动哈希化避免冲突
- 深度选择器
/deep/已被弃用，改用::v-deep(Vue)或:global(React)
