uni-app 中启用 sass 或 less 需安装对应依赖（如 sass + sass-loader v12+ 或 less + less-loader v10+），并在 vue.config.js/ts 中通过 chainwebpack 清除默认 css rule 后重定义 scss/sass/less 规则，配置 vue-style-loader → css-loader → 预处理器 loader，且 @import 必须用相对路径、不支持全局变量自动注入。
uni-app 项目里怎么启用 Sass 或 Less
直接装依赖 + 改 vue.config.js 或 vue.config.ts，不改配置文件的话，@import 或 lang="scss" 都会报错，编译直接失败。
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-loaderv10 的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 失效。
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
- 必须用
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"></style> 都得自己 import 一遍，还不能写错路径层级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
