Less编译后CSS类名冲突根源是原始CSS与Less生成CSS共存且类名重复，应统一导入Less文件或关闭css-modules；变量无法在纯CSS中使用，需借助PostCSS插件桥接。
Less编译后CSS类名冲突怎么办
直接改less-loader配置加modifyVars或javascriptEnabled没用——冲突根源不在编译器，而在你同时引入了原始CSS文件和Less生成的CSS，且两者都作用于同一套类名（比如.btn）。浏览器按加载顺序覆盖，结果不可控。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把存量CSS文件统一重命名为
.css.less，用@import在主Less文件里导入，确保全部走Less编译流程 - 若必须保留原CSS（如第三方UI库），在Webpack中用
css-loader的modules: false显式关闭模块化，避免与Less模块化规则打架 - 检查是否误启了
css-modules，Less默认不支持模块化，开了会导致:local(.btn)这类写法被忽略，类名原样输出却无对应样式
Webpack里Less和CSS共存时样式优先级乱序
不是“谁写在后面谁生效”，而是Webpack打包后CSS资源的<link>插入顺序、@import嵌套深度、以及CSS specificity共同决定的。Less编译出的CSS如果被拆成多个chunk，加载时机可能晚于页面已有的全局CSS。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
webpack.config.js中统一用MiniCssExtractPlugin提取样式，禁用style-loader的动态插入，确保所有CSS都走静态链接 - 给第三方CSS加
/* webpackIgnore: true */注释，防止被less-loader误处理 - 用
postcss-import替代Less原生@import处理跨文件依赖，它能自动排序@import语句，避免循环引用导致的顺序错乱
Less变量在纯CSS文件里无法复用
Less变量只在.less文件内有效，直接写进.css里就是非法语法，浏览器会静默丢弃整条规则。想让CSS也用上@primary-color？得靠PostCSS插件桥接。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把主题变量抽成
variables.json，用postcss-variables插件读取，在CSS里写color: var(--primary-color) - 若坚持用Less变量，就别混写CSS——把所有需要变量的地方都挪到
.less里，用&嵌套或extend复用逻辑，而非复制粘贴颜色值 - 注意
postcss-variables默认不支持嵌套变量（如@bg: @primary-color;），要启用recursive: true选项
Vue/React项目里
不是Less的问题，是HMR（热模块替换）对多语言样式块识别混乱。当一个组件同时有<style></style>和<style lang="less"></style>，Webpack可能只监听其中一种变更，改了Less文件但CSS没刷新，或者反过来。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在Vue CLI或Vite中关闭
css.hotReload，改用css.devSourcemap: true，让开发者工具精准定位样式来源 - React项目用
craco时，在craco.config.js里给less-loader加additionalData注入全局变量，避免每个.less文件重复@import "vars.less" - 禁用
css-loader的importLoaders链式调用，防止它把Less文件当成普通CSS二次处理，造成重复编译
真正麻烦的是变量作用域穿透——Less的@import是词法作用域，而CSS自定义属性是运行时继承，混用时很容易以为改了变量就全局生效，其实只影响了某一层嵌套。这点调试起来最费时间。
