Webpack本身不识别less、sass或stylus等预处理器语法，必须通过loader链式处理：less-loader/sass-loader/stylus-loader先将预处理语法编译为CSS，再交由css-loader解析@import和url()，最后由style-loader注入<style>标签；若缺失预处理loader或顺序错误（如less-loader未置于最右），则因css-loader无法识别非标准CSS语法而报错。
Webpack 本身不识别 less、sass 或 stylus 等预处理器语法，必须通过 loader 链式处理才能编译并注入样式。直接写 @import 或用 require('./style.less') 会报错，因为没有 loader 解析它。
为什么 css-loader + style-loader 不够用？
这两个 loader 只处理标准 CSS：前者解析 @import 和 url()，后者把结果插入 <style> 标签。但遇到 .less 文件里的嵌套、变量或 & 选择器时，css-loader 会直接报错 —— 它根本不认识这些语法。
-
css-loader输入必须是合法 CSS 文本，不是预处理源码 - 预处理器需要先被编译成 CSS，再交给
css-loader - loader 执行顺序是从右往左，所以编译器（如
less-loader）必须在css-loader左侧
less / sass / stylus 对应的 loader 怎么装？
不同预处理器对应不同 loader，不能混用。安装时注意版本兼容性（尤其 Webpack 5+ 要求 loader 为 v5+）：
-
less→npm install --save-dev less less-loader（less-loader内置调用less编译器） -
sass→npm install --save-dev sass sass-loader（推荐sass而非node-sass，后者已废弃） -
stylus→npm install --save-dev stylus stylus-loader
注意：sass-loader v12+ 默认使用 dart-sass，无需额外安装；若需 node-sass（已停更），得降级到 v11 并手动装 node-sass。
立即学习“前端免费学习笔记（深入）”；
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
webpack.config.js 中怎么配预处理器规则？
关键在 module.rules 的 use 数组顺序：最右边的 loader 先执行。以 less 为例：
module: {
rules: [
{
test: /\.less$/i,
use: [
'style-loader',
'css-loader',
'less-loader' // ← 必须放最右，负责把 .less 编译成 CSS
]
}
]
}
常见错误：
- 漏掉
css-loader：导致@import或url()不解析，样式丢失 - 顺序写反（如
['less-loader', 'css-loader']）：css-loader收到的是未编译的 less 源码，直接报错 - 没加
i标志：正则/\.less$/匹配不到APP.LESS，建议统一用/\.less$/i
如何让预处理器支持全局变量或 mixins？
不能靠 import 语句硬塞进每个文件。loader 提供 additionalData 选项，在所有预处理文件开头自动注入内容：
use: [
'style-loader',
'css-loader',
{
loader: 'less-loader',
options: {
additionalData: `@import "@/styles/variables.less";`
}
}
]
注意点：
-
additionalData是字符串，路径需相对于项目根目录（或用别名，前提是 Webpack 已配resolve.alias） -
sass-loader用additionalData，stylus-loader用use数组传入import文件 - 避免在
additionalData里写逻辑复杂的 mixin，否则每次编译都重新解析，影响增量构建速度
真正容易被忽略的是 loader 版本与 Webpack 主版本的匹配 —— Webpack 5 要求 less-loader ≥ v8，sass-loader ≥ v12，装错版本会导致 loader 不执行或静默失败，控制台无报错但样式不生效。
