CODEWITHSUNDEEP
postcssvue-cli-3
owenmelbz
owenmelbz

Reputation: 6584

How to get postcss-nesting and @vue/cli pwa working?

How is it possible to get postcss-nesting and a @vue/cli v3 project built with the PWA plugin working?

So far I've tried

npm install postcss-nesting

I then created a src/main.css which contains

body {
    h1 {
        color: green;
    }
}

Inside the main.js file I import the css import './main.css';

Then inside the postcss.config.js I've added it to the plugins (with others that work) e.g.

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

When I then run npm run serve the CSS does not transform into body h1 as you can see

chrome dev tools

What would be the correct way to get this working?

Thanks

Upvotes: 1

Views: 2070

Answers (1)

Daniel Doblado
Daniel Doblado

Reputation: 2878

Nesting should be enabled inside package.json since vue-cli does not read the configuration from postcss.config.js or .postcssrc.js as mentioned here.

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

Working example on this repository: https://github.com/dobladov/vue-cli-example-postcss

Also for the nesting is important to use the symbol &

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

Upvotes: 1

Related Questions