rollup-plugin-less 必须配置 extract: true 才生成独立 CSS 文件，否则样式仅以字符串形式嵌入 JS；加前缀需改用 rollup-plugin-postcss 配 autoprefixer；避免重复输出应统一 Less 入口并设 extract 到单文件。
rollup-plugin-less 必须配合 extract: true 才生成 CSS 文件
只装 rollup-plugin-less 并在配置里写 less()，不会自动产出 .css 文件——Rollup 默认把所有 Less 导入都当 JS 模块处理，结果是样式被编译成字符串塞进 JS bundle 里，比如 var css = ".btn{color:red}"。真正触发文件落地的开关只有一个：extract: true 或指定路径如 extract: 'dist/index.css'。
常见静默失败现象：
-
import './Button.less'后 dist 目录里只有 JS，没 CSS - 浏览器里样式生效了，但 SSR 场景下完全没样式（因为没物理文件）
- 构建日志里没有
created dist/index.css这类输出
实操建议：
- 必须显式传
extract: true，哪怕只是临时用 - 搭配
output.assetFileNames控制输出路径，避免和 JS 文件名冲突：assetFileNames: 'assets/[name]-[hash][extname]' - 确保
import语句真实存在，插件不会扫描未引用的 Less 文件
如何让 Less 编译后自动加浏览器前缀？
rollup-plugin-less 本身不处理前缀，它只做语法编译；autoprefixer 是 PostCSS 插件，和 Less 编译器不在同一层。想加前缀，得走 rollup-plugin-postcss + less 预处理器链，或者改用 rollup-plugin-postcss 直接处理 .less 文件（需配 extensions: ['.less']）。
立即学习“前端免费学习笔记（深入）”；
更稳妥的做法是统一收口到 rollup-plugin-postcss：
- 删掉
rollup-plugin-less，只留rollup-plugin-postcss - 在
postcss()配置里加extensions: ['.less', '.css'] -
plugins数组里放require('autoprefixer')()，不是对象 - Less 语法能被正确解析，前提是项目已装
less和postcss-less
注意：postcss.config.js 不会被自动读取，必须手动传 plugins 数组。
打包单体 CSS 时怎么避免重复输出？
多个入口（比如组件库的 Button、Dialog）各自 import './xxx.less'，若不干预，默认会为每个入口生成一份 CSS，造成冗余。Rollup 本身不合并 CSS，靠插件控制。
关键点：
- 所有 Less 导入指向同一个主文件，比如统一
import '../styles/index.less'，由它@import其他模块 - 在
rollup-plugin-postcss中设extract: 'dist/style.css'，强制所有样式打到一个文件 - 禁用
emitCss: true（如果用了 Vue 插件等可能默认开启） - 检查
output.assetFileNames是否带哈希，带哈希会导致同内容不同名，无法复用
如果用了 rollup-plugin-vue，记得关掉它的 style.inject，否则会双重注入。
为什么 Less 类名没哈希、全局污染严重？
Less 原生不支持 CSS Modules，.module.less 后缀不会自动启用作用域隔离。要实现类名哈希和局部作用域，必须走 postcss-modules，而不是依赖文件名。
正确路径：
- 用
rollup-plugin-postcss替代rollup-plugin-less - 开
modules: true，并配exportLocalsConvention: 'camelCase' - 通过
include: ['**/*.module.less', '**/components/**/*.less']主动纳入非标准命名 - 想只注入不导出类名 → 改用
import './Dialog.module.less'（无解构） - 想在 JS 里用类名 → 保持
import styles from './Dialog.module.less'，但必须配对modules: true
混用 rollup-plugin-less 和 postcss-modules 会失效——抽象层级冲突，插件根本收不到模块化请求。
最常被忽略的是：CSS 的“单体”不是靠插件选型决定的，而是靠 import 链路是否收敛。一个 import 语句既触发样式注入、又触发 JS 字符串化，就等于开了两道门——体积和作用域问题，八成出在这儿。
