Gulp 媒体查询的 postCSS-mixins 问题

Question

我正在听关于 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 没有问题，它工作正常，在导师的课程中，一切都适用于这种语法，而在我的代码中 - 没有。我做错了什么？

Answer 1

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

Gulp 媒体查询的 postCSS-mixins 问题

Gulp postCSS-mixins issue with media-queries

media-queries

gulp

postcss