react项目scss如何配置
配置SCSS在React项目中
在React项目中使用SCSS需要安装相关依赖并进行配置。以下是详细步骤：
安装node-sass或sass 使用npm或yarn安装sass（推荐使用sass，node-sass已废弃）：
npm install sass --save-dev
# 或
yarn add sass --dev创建SCSS文件
在项目目录中创建.scss文件，例如App.scss，并编写样式：
$primary-color: #61dafb;
.app {
color: $primary-color;
}在组件中引入SCSS文件 在React组件中直接导入SCSS文件：
import './App.scss';高级配置（可选）
模块化SCSS
为了避免样式冲突，可以使用CSS Modules。将SCSS文件命名为[name].module.scss并导入：
import styles from './App.module.scss';
function App() {
return <div className={styles.app}>Hello World</div>;
}全局变量和混入
创建_variables.scss和_mixins.scss文件存放全局样式，通过@import在其他SCSS文件中使用：
// _variables.scss
$primary-color: #61dafb;
// App.scss
@import './variables';
.app {
color: $primary-color;
}注意事项
- 确保构建工具（如webpack）已配置支持SCSS。Create React App默认支持无需额外配置。
- 使用CSS Modules时，类名会被编译为哈希字符串避免冲突。
- 对于自定义webpack配置的项目，可能需要手动添加sass-loader规则。
