如何使用Gulp编译Magento 2 LESS媒体查询

Question

我写了一个gulp脚本，基本上在我的magento 2主题之上编译了我所有的自定义样式。它编译了除 LESS Media 查询 mixin 中的 css 之外的所有 css：

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {

我已经尝试了很多，从谷歌搜索问题到阅读和理解mixin的工作原理。我觉得很奇怪，我的终端没有出现错误。

function compile(done) {
const brandPaths = ["gcn", "gtn", "embn", "gmbn"];
brandPaths.forEach(brand => {
src(`app/design/frontend/Playsports/theme_frontend_${brand}/web/css/source/_base-theme.less`)
.pipe(less())
.pipe(minifyCSS())
.pipe(rename({ suffix: ".min" }))
.pipe(dest(`app/design/frontend/Playsports/theme_frontend_${brand}/Magento_Theme/web/`));
done();
});
}
function watchChange(done) {
watch("app/design/frontend/Playsports/**/*.less", series(compile));
done();
}

我希望我的 gulp 脚本也能编译媒体查询，但这是我遇到的问题

Answer 1

如果您正在寻找与核心 magento 风格和结构保持一致的东西，我们的团队开发了这款 bobmotor/magento-2-gulp，支持：

• 默认的Magento 2项目结构，dev/tools/grunt/configs/themes.js内部有主题配置
• 带composer安装
• .less
• browsersync和liverreload
• 使用Babel编译 ES6+
• 创建svg精灵
• 编译critical.css(Magento 2.3.3)