您的位置:首页 > 其它

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

2022-05-28 19:51 1276 查看

今天在尝试使用 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"
]
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: