uni-app项目中如何设置SassLess作为CSS预处理器？

本文共计1086个文字，预计阅读时间需要5分钟。

直接安装依赖，然后不修改配置文件，使用代码：

uni-app 默认只认 css，Sass/Less 是额外能力，得手动接进 webpack 构建链。HBuilderX 创建的项目默认没配，CLI 创建的也得自己加。

• 用 Sass：装 sass（v1.33+ 推荐）和 sass-loader（v12+，注意和 webpack 版本对齐）
• 用 Less：装 less 和 less-loader（v10+，uni-app CLI v3.0+ 内置 webpack 5，别用 v9）
• uni-app 3.x 对应 webpack 5，less-loader v10 的 less 依赖必须是 v4+；sass 推荐用 Dart Sass（sass 包），别用 Node Sass（已废弃）

vue.config.js 里怎么写 loader 配置

uni-app 的构建底层是 Vue CLI，所以靠 configureWebpack 或 chainWebpack 注入规则。别在 pages.json 或 manifest.json 里找开关——那俩完全不相关。

重点不是“加 loader”，而是“替换掉默认的 css rule”，否则会冲突。uni-app 自带一套 css 处理逻辑，直接 push 新 rule 会导致 @import 不解析、source map 错乱、HMR 失效。