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配置：

1. 安装工具包：

   npm install react-app-rewired customize-cra --save-dev

2. 创建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代码