使用 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，对其进行处理。Webpack 编译器在使用require()/import 语句时，解析xxx.less文件，在对它打包之前，按照 use 里面的顺序，先使用MiniCssExtractPlugin.loader。

问题就出在顺序上，less-loader调到最后一个位置就能够编译 less 的混合（mixins），并识别语法。

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

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

相关文章