使用 Less 混合（Mixins）时报语法错误

今天在尝试使用 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

require()/import

xxx.less

MiniCssExtractPlugin.loader

问题就出在顺序上，

less-loader

use: [
MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader",
"less-loader"
]