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

【问题标题】：How do I compile Magento 2 LESS media queries with Gulp如何使用 Gulp 编译 Magento 2 LESS 媒体查询
【发布时间】：2019-11-21 18:15:41
【问题描述】：

我编写了一个 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 脚本也能编译媒体查询，但这是我遇到的问题

【问题讨论】：

标签： gulp less media-queries magento2

【解决方案1】：

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

默认magento 2项目结构，主题配置在dev/tools/grunt/configs/themes.js
安装composer
.less
browsersync 和 liverreload
用Babel编译es6+
创建svg sprites
编译critical.css (Magento 2.3.3)

【讨论】：