媒体查询的 Gulp postCSS-mixins 问题答案

【问题标题】：Gulp postCSS-mixins issue with media-queries媒体查询的 Gulp postCSS-mixins 问题
【发布时间】：2018-04-03 22:34:20
【问题描述】：

我正在听关于 gulp 和 postCSS 的 Udemy 视频课程，并在做与导师相同的事情，但没有任何效果。

我的媒体查询混合：

@define-mixin atSmall {
    @media (min-width: 530px) {
        @mixin-content;
    }
}

我的 postCSS 代码：

.large-hero__title {
  font-size: 1.1rem;

  @mixin atSmall {
      font-size: 2rem;
    }
}

并且编译成这段代码，所以媒体查询不能正常工作：

.large-hero__title {

    font-size: 1.1rem;

    @media (min-width: 530px) {
      font-size: 2rem;
    }
}

我的 Gulp 依赖列表：

  "dependencies": {
    "jquery": "^3.2.1",
    "normalize.css": "^7.0.0"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.5",
    "browser-sync": "^2.18.13",
    "gulp": "^3.9.1",
    "gulp-postcss": "^7.0.0",
    "gulp-watch": "^4.3.11",
    "postcss-import": "^11.0.0",
    "postcss-mixins": "^6.2.0",
    "postcss-nested": "^2.1.2",
    "postcss-simple-vars": "^4.1.0"
  }

Gulp Watch 没有问题，它工作正常，在导师的课程中，一切都使用这种语法，而在我的代码中 - 没有。我做错了什么？

【问题讨论】：

标签： gulp media-queries postcss

【解决方案1】：

为了解决问题，我在 gulp 任务文件中的“postcss-mixin”之后放置了“postcss-nested”，一切正常！

【讨论】：