MiniCssExtractPlugin 与 Less 不冲突，真正冲突的是编译阶段、loader 顺序、source map 路径和 CSS 依赖顺序四类问题；需确保 loader 顺序为 MiniCssExtractPlugin.loader → css-loader → less-loader → postcss-loader，且 publicPath: '' 解决 source map 404。
MiniCssExtractPlugin 和 Less 本身不冲突，真正冲突的是它和 Less 的编译阶段、loader 链顺序、source map 路径、以及 CSS 依赖顺序这四类问题。 直接配对用通常会报空 CSS、404 source map、@apply 失效、Conflicting order 警告等——不是插件坏了，而是构建流程没对齐。
loader 执行顺序必须是 MiniCssExtractPlugin.loader → css-loader → less-loader → postcss-loader
很多人把 postcss-loader 放在 less-loader 前面，结果 Tailwind 的 @apply 在 Less 编译阶段就被当未知规则丢弃了。Less 必须先完成变量、嵌套、@import 展开，再交给 PostCSS 处理。
-
less-loader负责把.less编译成标准 CSS（此时@apply还是原始字符串） -
postcss-loader接着处理生成的 CSS，由tailwindcss插件识别并替换@apply -
css-loader在中间负责解析@import和url()，必须在less-loader之后、postcss-loader之前 -
MiniCssExtractPlugin.loader是入口 loader，只管“把样式抽出来”，不参与编译逻辑
错误配置示例：[MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader'] → @apply 永远不会生效。
publicPath: '' 是解决 source map 404 的硬性要求
用了 MiniCssExtractPlugin 后，浏览器控制台常报 Failed to load source map: Could not load content for http://localhost:8080/css/app.css.map，即使文件明明存在。这是因为插件默认把 sourceMappingURL 写成绝对路径，而开发服务器实际跑在子路径下（比如 /myapp/）。
立即学习“前端免费学习笔记（深入）”；
- 必须在插件配置里显式加
publicPath: ''，强制生成相对路径：sourceMappingURL=app.css.map - 同时确认
output.publicPath和devServer.publicPath一致，否则sources字段里的路径前缀也会错位 - VS Code 定位不到
.less行号？大概率是sources里写的是../src/button.less，但开发服务器没暴露该路径——需要配devServer.static.directory或改用webpack-dev-server的historyApiFallback兜底
module.less 文件内容为空？本质是未被 JS 入口主动引用
MiniCssExtractPlugin 不会扫描文件系统自动打包所有 .less 文件，它只处理被 JS import 或 require 的模块。如果你有 header.module.less、dashboard.module.less 却没在任何 JS 里 import './header.module.less'，那它们根本不会进构建流程，输出自然为空。
- 确保每个模块级
.less文件都被某个 JS 文件显式导入（哪怕只是import './xxx.module.less'） - 别依赖 Webpack 的
glob自动匹配或less-loader的additionalData注入——这些不触发MiniCssExtractPlugin的提取逻辑 - 如果想按路由拆分 CSS，得配合代码分割：
import('./pages/home.module.less')+ 动态<link>插入，且确保MiniCssExtractPlugin在生产模式下启用
Conflicting order 警告不是 bug，但暴露了 CSS 依赖管理缺陷
这个警告说明两个 CSS 模块通过不同路径引入了同一份基础样式（比如都 @import 'variables.less'），但最终注入顺序不一致。Webpack 检测到它们在最终 CSS 中的声明顺序冲突，可能引发样式覆盖问题。
- 最简单解法：插件配置加
ignoreOrder: true，但它只是屏蔽警告，不解决根源 - 根治方式：统一用
@import (reference)引入变量/mixin 文件，确保它们不产出 CSS；所有可复用的公共样式（reset、base）单独建base.css，由主入口单点导入 - 避免在多个组件
.less里各自@import 'mixins.less'—— Less 的@import提升机制会让实际输出顺序不可控 - 如果用了 CSS Modules，注意
localIdentName不能包含[path]，否则不同路径下同名 class 会被当成不同标识，破坏样式复用
真正难搞的从来不是配置项本身，而是 Less 的 @import 语义和 Webpack 的模块图之间那层隐式耦合——你改一行 @import，可能就让整个样式顺序重排。动手前，先画清楚依赖树。
