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 失效。

立即学习“前端免费学习笔记（深入）”；

• 必须用 config.module.rule('scss').oneOfs.delete('normal') 这类方式先清掉默认规则（uni-app 3.6+ 推荐用 chainWebpack）
• 然后重新定义 rule('scss')，设置 test: /\.scss$/，再用 use 接 vue-style-loader → css-loader → sass-loader
• 如果用 lang="sass"（无括号语法），test 得改成 /\.sass$/，且 sass-loader 要加 implementation: require('sass'), sassOptions: { indentedSyntax: true }

module.exports = { chainWebpack: config => { config.module .rule('scss') .oneOfs.clear() .end() .rule('scss') .test(/\.scss$/) .use('vue-style-loader') .loader('vue-style-loader') .end() .use('css-loader') .loader('css-loader') .end() .use('sass-loader') .loader('sass-loader') .options({ implementation: require('sass') }) } }

组件里写 lang="scss" 没生效？检查这三处

最常见的是写了但没反应，样式还是普通 CSS 行为，比如嵌套不生效、变量报错、@import 找不到文件——基本不是语法问题，是路径或作用域卡住了。

• @import 路径必须是相对路径（如 @import './var.scss'），不能用 ~ 别名，uni-app 不处理 node_modules 里的 @import（除非你显式配了 sassOptions.includePaths）
• 全局变量（如颜色变量）要每个组件单独 @import，uni-app 不支持自动注入，别指望在 main.js 里 import 一次就全局生效
• lang="scss" 和 lang="sass" 不通用：前者用 {} 语法，后者用缩进，混用会直接编译失败，错误信息通常是 Invalid CSS after

真机调试时 Sass 报错但 H5 正常？注意运行时差异

小程序平台（尤其是微信）不执行构建后的 CSS 预处理逻辑，所有预处理必须在编译阶段完成。如果看到 “Undefined variable” 或 “File to import not found”，说明 loader 没跑起来，或者路径在小程序环境下被截断了。

• 微信小程序要求所有样式文件路径必须是静态字符串，动态拼接（如 @import '@/styles/' + 'mixins.scss'）会失败
• HBuilderX 的“自定义模板”或“运行到手机”可能跳过部分 webpack 配置，务必用 npm run build:mp-weixin 打包后验证，别只信开发服务器
• App 端（iOS/Android）用的是 weex 渲染器，不支持 @extend、@at-root 等高级 Sass 特性，用了会静默忽略或样式错乱

预处理器不是开关一开就万事大吉，它把编译时机、路径解析、平台限制全串在一起。最容易漏的是：以为配好 loader 就能全局共享变量，结果每个 <style lang="scss"> 都得自己 import 一遍，还不能写错路径层级。