rollup-plugin-less 必须显式配置 include: ['*/.less'] 才能处理 .less 文件，否则文件被完全忽略；需配合 rollup-plugin-postcss 并启用 extract: true 和 use: [['less', {}]] 生成独立 css；css modules 必须通过 postcss 的 modules: true 启用，且 output.assetfilenames 要设为 '[name].[hash].css'。
rollup-plugin-less 必须显式处理 .less 后缀，否则文件被完全忽略
Rollup 默认跳过所有 .less 文件，不会触发任何插件逻辑——哪怕你装了 rollup-plugin-less。常见静默失败现象是：写了 import './Button.less'，但构建后 dist/ 下既没 CSS 文件，也没报错。
必须确保插件配置中明确声明 include 或靠文件扩展名匹配：
-
include: ['**/*.less']是最稳妥的写法，不依赖插件默认行为 - 别只靠
extensions: ['.less']（那是@rollup/plugin-node-resolve用的，对样式插件无效） - 如果用了
rollup-plugin-postcss，它默认不处理.less，必须手动加extract: true并配use: [['less', {}]]
要生成独立 CSS 文件，extract 配置缺一不可
只引入 import './Dialog.less' 不会自动落地为 CSS 文件。关键动作是让插件执行提取逻辑，而不是把样式编译成 JS 字符串塞进 bundle。
使用 rollup-plugin-less 时，必须传入 output: 'dist/Button.css' 或启用 extract: true（部分版本支持）；更通用的做法是配合 rollup-plugin-postcss + less 预处理器：
-
postcss({ extract: true })—— 启用提取，否则 CSS 仅内联或转成 JS 字符串 -
use: [['less', { javascriptEnabled: true }]]—— 显式注册 less 处理器 -
output.assetFileNames必须设为'[name].[hash].css'，否则生成的 CSS 可能被重命名成xxx.js，看着像“没打包成功”
类名哈希与作用域隔离不能靠文件后缀猜，得靠 modules: true
写 Dialog.module.less 不等于自动开启 CSS Modules；rollup-plugin-less 本身不支持模块化，必须换用 rollup-plugin-postcss 并启用 modules: true。
否则所有组件的类名都落在全局，.overlay 和 .mask 会互相污染：
- 配
modules: true后，import styles from './Dialog.module.less'才能导出哈希类名 - 想避免导出、只注入样式？改用
import './Dialog.module.less'（无解构），并确保插件没误将该文件当 JS 模块处理 -
generateScopedName推荐设为'[name]__[local]___[hash:base64:5]'，兼顾可读性与唯一性
Less 变量复用和 @import 冲突是体积膨胀的隐形推手
多个组件都 @import 'variables.less'，若没启用 postcss-modules 的 scopeAtRules: true 或类似机制，变量会被重复解析、展开，最终导致 CSS 体积翻倍。
更危险的是：一个 .less 文件里混用 @import 和 import（JS 语法），Rollup 可能把它当 JS 模块加载两次——一次走样式插件，一次走 resolve 插件，造成样式重复注入或构建卡死。
建议统一策略：
- 基础变量/混入统一放在
src/styles/_variables.less，所有组件@import它，不要import到 JS 中 - 禁用
rollup-plugin-import-css与rollup-plugin-less共存，二者抽象层级冲突，大概率出现Cannot read property 'replace' of undefined - 检查产物中是否出现
var css = "._overlay_xxx{}"这类字符串拼接——这是样式被 JS 化的明确信号，说明模块链没切断
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
