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-app 2.0+默认支持）。
• 若使用自定义Webpack配置，需手动添加Sass加载器规则。
• 生产构建时，样式会自动压缩并提取为CSS文件。