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

2022-05-28 20:02:07 阅读：214 来源： 互联网

标签：MiniCssExtractPlugin use 语法错误 less Less Mixins loader Webpack

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

标签：MiniCssExtractPlugin,use,语法错误,less,Less,Mixins,loader,Webpack
来源： https://www.cnblogs.com/shiramashiro/p/16321751.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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