Как заставить работать postcss-вложенность и @ vue / cli pwa?

Question

Как можно получить postcss-nesting и @vue/cli v3 проект, построенный с работающим плагином PWA?

Пока я пробовал

npm install postcss-nesting

Затем я создал src/main.css, который содержит

body {
    h1 {
        color: green;
    }
}

Внутри файла main.js я импортирую css import './main.css';

Затем внутри postcss.config.js Я добавил егок плагинам (с другими, которые работают), например

module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-nesting': {},
  }
}

Когда я запускаю npm run serve, CSS не преобразуется в body h1, как вы можете видеть

Какой правильный способ заставить это работать?

Спасибо

Answer 1

Вложение должно быть включено внутри package.json, поскольку vue-cli не считывает конфигурацию из postcss.config.js или .postcssrc.js, как указано здесь .

  "postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-preset-env": {
        "browsers": "last 2 versions",
        "features": {
          "nesting-rules": true,
          "custom-media-queries": true,
          "color-mod-function": true
        }
      }
    }
},

Рабочий пример наэтот репозиторий: https://github.com/dobladov/vue-cli-example-postcss

Также для вложения важно использовать символ &

<style>
    body {
      background-color: tomato;
      & .foo {
        color: purple;
      }
    }
 </style>