react脚手架如何使用scss
使用SCSS/SASS在React脚手架中的配置方法
React脚手架（如Create React App）默认支持SCSS/SASS，只需简单配置即可使用。以下是具体实现方式：
安装SASS依赖
在项目根目录运行以下命令安装node-sass或官方推荐的sass：
npm install sass或
yarn add sass创建SCSS文件
将组件的CSS文件扩展名改为.scss或.sass，例如：
// Button.module.scss
$primary-color: #1890ff;
.button {
background: $primary-color;
&:hover {
background: darken($primary-color, 10%);
}
}在组件中引入
通过模块化方式引入SCSS文件：
import styles from './Button.module.scss';
function Button() {
return <button className={styles.button}>Click</button>;
}全局样式配置
在src/index.js或入口文件中引入全局SCSS：
// src/styles/global.scss
$font-stack: Helvetica, sans-serif;
body {
font-family: $font-stack;
}import './styles/global.scss';高级配置（可选）
如需自定义SASS加载选项，可通过react-app-rewired修改webpack配置：
-
安装工具包：
npm install react-app-rewired customize-cra --save-dev -
创建
config-overrides.js：const { override, adjustStyleLoaders } = require('customize-cra');
module.exports = override( adjustStyleLoaders(rule => { if (rule.test.toString().includes('scss')) { rule.use.push({ loader: require.resolve('sass-resources-loader'), options: { resources: './src/styles/variables.scss' } }); } }) );
#### 注意事项
- Create React App 4.0+版本已内置SASS支持，无需额外配置
- 模块化样式需使用`.module.scss`后缀避免命名冲突
- 生产构建时会自动压缩和优化SCSS代码
