Gulp postCSS-mixins проблема с медиа-запросами

Question

Я слушаю видеокурс Udemy о gulp и postCSS и делаю то же самое, что и репетитор, но ничего не получается.

Мои медиа-запросы смешиваются:

@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;
    }
}

Мой список зависимостей:

  "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

Чтобы решить проблему, я поместил postcss-nested после postcss-mixin в файле задач gulp, и все работает!