今天在尝试使用 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"
]
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。