CSS在前端构建工具中如何引入预处理器_配置Sass或Less解析-css教程-PHP中文网

Webpack报“Can't resolve 'sass'”是因为只装了sass-loader而漏装sass（Dart Sass）；Vite中Less报错需配置additionalData注入变量；PostCSS不处理Sass变量，只处理CSS变量；Next.js App Router的global.css不支持@use语法。

css在前端构建工具中如何引入预处理器_配置sass或less解析

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-loader v12+ 不兼容

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 变量完全无感知。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

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 中