Webpack报“Can't resolve 'sass'”是因为只装了sass-loader而漏装sass（Dart Sass）；Vite中Less报错需配置additionalData注入变量；PostCSS不处理Sass变量，只处理CSS变量；Next.js App Router的global.css不支持@use语法。
Webpack 里配 Sass 加载器总报 Module not found: Error: Can't resolve 'sass'
装了 sass 但 Webpack 还是找不到，大概率是你只装了 sass-loader，漏掉了编译引擎本身。Sass 有两种实现：Node.js 原生的 sass（Dart Sass）和老的 node-sass（已废弃）。现在必须装 sass，不是可选。
-
yarn add -D sass sass-loader（sass是必需的运行时依赖，sass-loader是 Webpack 插件） - 如果用 Webpack 5+，不用额外装
css-loader和style-loader，但实际项目中仍建议显式安装并配置，避免隐式行为不一致 - 检查
node_modules下是否有sass目录，没有就说明没装成功；node-sass装了也没用，它和sass-loaderv12+ 不兼容
Vite 中启用 Less 支持却提示 “Unexpected token” 或变量未定义
Vite 默认支持 .less，但“支持”仅指基础解析——全局变量、混入（mixin）、自定义函数这些需要手动注入。报错常发生在用了 @import 'utils.less' 却没配路径别名，或想在所有样式里直接用 @primary-color 却没做全局注入。
- 在
vite.config.ts的css.preprocessorOptions.less里加additionalData，把公共变量一次性塞进去：additionalData: `@import "@/styles/variables.less";`
- 别用相对路径写
@import '../common/mixins.less'，Vite 的 less 解析不自动 resolve 别名，必须用@/开头或绝对路径 - 如果用了
less的 JavaScript 表达式（比如unit(@value, px)），确保math选项设为always，否则 Vite 默认用strict模式会禁掉
PostCSS 配了 postcss-preset-env，但 Sass 编译后 CSS 变量还是没转成兼容写法
Sass 的 $color: #333 是预处理器变量，编译后就没了；而 --color: #333 是原生 CSS 变量，PostCSS 才能处理。很多人混淆这两者，以为开了 PostCSS 就能“自动降级”所有变量，其实它对 Sass 变量完全无感知。
- Sass 变量必须在
.scss文件里完成计算和替换，PostCSS 看到的已经是展开后的 CSS，没法再回溯 - 要让 CSS 变量兼容老浏览器，得用
postcss-custom-properties，且确保它在postcss-preset-env之前执行（顺序很重要） - 如果想统一管理主题色，推荐 Sass 变量 + CSS 变量双写：先用
$primary: #007bff做逻辑，再用:root { --primary: #007bff; }输出，后者才进 PostCSS 流水线
Next.js 13+ App Router 下 global.css 里引入 @use 'theme' as t 报错 “@use rules must be written before any other rules”
Next.js 的 app/ 目录强制使用 CSS Modules 或全局 CSS，但全局 CSS 不支持 Sass 的模块化语法（@use、@forward），只认老式 @import。这是设计限制，不是配置问题。
立即学习“前端免费学习笔记（深入）”；
- 要么退回到
@import 'theme.scss'（注意它会重复编译，多个文件 import 同一个 theme 会导致 CSS 重复） - 要么把主题抽成 JS 对象，用
styled-jsx或clsx+tailwind动态拼类名，绕过预处理器 - 如果坚持用
@use，只能放在page.module.scss这类模块文件里，然后通过import styles from './page.module.scss'在组件中消费，不能写在global.css中
