今天在尝试使用 less 的混合语法时，浏览器直接报了一个语法错误。下图是报错信息：
仔细地阅读了官方文档，和对比自己写的，并没有任何错误。
.FlexLayout {
.Start() {
display: flex;
align-items: center;
align-content: center;
justify-content: start;
}
}
下面是 webpack 的配置文件：
module: {
rules: [
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"less-loader",
"postcss-loader"
]
}
]
}
Webpack 处理非 JavaScript 文件时需要使用xxx-loader，对其进行处理。Webpack 编译器在使用require()/import 语句时，解析xxx.less文件，在对它打包之前，按照 use 里面的顺序，先使用MiniCssExtractPlugin.loader。
问题就出在顺序上，less-loader调到最后一个位置就能够编译 less 的混合（mixins），并识别语法。
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader",
"less-loader"
]
