根本原因是less和sass编译出的css均注入全局作用域且类名未隔离，如.btn在两者中重复定义时，后加载者覆盖前者；微前端下子应用同名类（如.modal）更会直接冲突。
Less 和 Sass 文件共存时，为什么样式会互相覆盖？
根本原因不是预处理器语法冲突，而是它们编译出的 CSS 都注入到同一全局作用域，且类名未做隔离。比如 .btn 在 Less 文件里定义一次、Sass 文件里又定义一次，最终浏览器只认最后加载的那个，毫无协商机制。
微前端场景下更危险：子应用 A 用 Less 写了 .modal，子应用 B 用 Sass 也写了 .modal，主应用一并加载，B 的样式直接干掉 A 的弹窗布局——你甚至找不到是谁动的手。
- 检查构建产物中是否同时存在
app-a.css和app-b.css，且都含未加前缀的通用类名（如.button、.container） - 确认两个子应用是否都用了
style-loader动态插入样式 —— 这会让 CSS 加载顺序不可控，比静态<link>更容易错乱 - 若用了 CSS Modules，但只在 Sass 侧启用、Less 侧没配
modules: true，就会出现一半隔离一半裸奔
如何让 Less 和 Sass 各自生成带命名空间的 CSS？
不能靠 HTML 加 class 或后置加载顺序来“碰运气”，必须在编译阶段把选择器物理包裹进唯一前缀。Sass 用嵌套，Less 用命名空间块，写法不同但目标一致。
以子应用名为 subapp-order 为例：
- Sass 侧（
main.scss）：.subapp-order { @import 'base'; @import 'components'; }所有导入的文件都会被自动带上.subapp-order前缀 - Less 侧（
main.less）：.subapp-order { @import 'base.less'; @import 'components.less'; }注意：不要用@import (reference)，它不输出 CSS，前缀就失效了 - 两者都要确保最终输出的 CSS 中，关键选择器形如
.subapp-order .button，而不是孤立的.button
VSCode 编译插件冲突导致 Less/Sass 样式“消失”的真实原因
你改了 button.less，保存后 button.css 没更新；或者改了 form.scss，结果 button.css 被清空 —— 这基本是 Live Sass Compiler 和 Easy LESS 在后台互殴。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 这两个插件都监听
editor.save事件，但 VSCode 不保证执行顺序，常出现一个刚写完，另一个立刻覆盖 -
Easy LESS自 2021 年停更，在 VSCode v1.80+ 上常假死，不报错也不生成文件；Live Sass Compiler在多根工作区下只监控第一个文件夹 - 它们默认都往同目录写同名
.css，比如index.less和index.scss都试图生成index.css，内容必然错乱
正确做法是弃用插件，改用 tasks.json 显式分发任务：sass --watch src/scss:dist/css/sass 和 lessc --watch src/less:dist/css/less，输出路径严格分离。
微前端中子应用 CSS 404 导致样式“全黑”的排查要点
子应用单独跑正常，嵌入主应用后按钮变回浏览器默认样式、字体全垮 —— 很可能不是样式冲突，而是 CSS 文件根本没加载成功。
典型表现：Failed to load resource: the server responded with a status of 404 () 出现在 DevTools Network 标签页，请求路径是 /css/app.abc123.css，但实际部署位置是 /subapp-order/css/app.abc123.css。
- 检查子应用构建配置：Webpack 用
output.publicPath: '/subapp-order/'，Vite 用base: '/subapp-order/' - 确认 CSS 文件引用路径是否为绝对路径（
/css/...）而非相对路径（./css/...）；绝对路径会从根域发起请求，必然 404 - 如果用了
MiniCssExtractPlugin，确保其filename和chunkFilename中的路径与publicPath对齐
这个 404 问题比样式冲突更隐蔽：它让你误以为“样式被覆盖了”，实际是压根没加载进来。先打开 Network 面板看 CSS 请求状态，再查类名是否冲突。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
