React项目中正确引入Sass需安装sass依赖，改.css为.scss并直接import；用@use实现模块化变量/Mixin；通过.module.scss+CSS Modules实现样式局部作用域；注意路径、热更新及嵌套深度。
React项目中如何正确引入Sass文件
React默认支持 .scss 和 .sass 文件，但前提是已安装对应依赖。Create React App 5.0+ 默认内置 Sass 支持，只需安装 sass（Dart Sass）即可：
- 运行
npm install sass（推荐 Dart Sass，Node Sass 已废弃） - 将组件样式文件从
.css改为.scss，例如Button.scss - 在组件中直接
import './Button.scss'，无需额外配置
若使用自定义 Webpack 配置（如 Vite 或 Next.js），需确认已添加 sass 加载器；Vite 默认支持，Next.js 需确保 next-sass 已弃用，改用内置的 sass。
在React组件中使用Sass变量和Mixin避免重复代码
Sass 的 @use 和 @forward 是模块化关键，不推荐继续用旧式 @import（它会全局污染并重复编译）：
- 在
src/styles/_variables.scss中定义：$primary-color: #007bff; - 在组件 SCSS 文件顶部写：
@use '../styles/variables' as v; - 使用时写：
color: v.$primary-color; - Mixin 同理：
@use '../styles/mixins' as m;，再调用@include m.respond-to('tablet') {...}
注意：每个 @use 只导入一次，变量/Mixin 不会跨文件泄漏，这比 CSS-in-JS 的主题透传更轻量、更可预测。
立即学习“前端免费学习笔记（深入）”；
如何让Sass样式只作用于当前React组件（局部作用域）
Sass 本身没有天然的 scoped 机制，但可通过 BEM 命名 + CSS Modules 结合实现真正隔离：
- 将文件命名为
Button.module.scss（必须含.module.） - 在组件中：
import styles from './Button.module.scss'; - JSX 中写：
className={styles['button--primary']} - SCSS 内仍可正常使用嵌套、
&、@media等特性，编译后类名自动哈希化
不要试图用 :global() 打破作用域——除非你明确需要覆盖第三方库样式；滥用会导致维护困难和意外覆盖。
常见报错及修复：Sass编译失败或样式不生效
典型错误包括：
-
File to import not found or unreadable: ~@/styles/variables→ 路径别名未被 Sass 解析，改用相对路径，或在tsconfig.json中配了paths但未在sassOptions中启用resolveUrl - 修改
_mixins.scss后组件样式未更新 → CRA 默认不会监听被@use的 partial 文件变动，需重启 dev server 或升级到最新 CRA 版本（v5.2.0+ 支持热更新 partial） - 嵌套过深导致生成冗余选择器（如
.a .b .c .d { ... }）→ Sass 编译无错，但影响性能和可维护性，建议嵌套不超过 3 层，复杂逻辑抽成 Mixin 或拆分文件
最易被忽略的是：Sass 模块化后，@use 的路径是相对于当前文件的，不是相对于项目根目录；哪怕配置了 Webpack alias，Sass loader 默认也不识别，得靠 sassOptions.includePaths 显式声明。
