Parcel PostCSS preprocessing /dynamic imports not working

Question

I'm trying to convert from Sass to PostCSS with PreCSS plugin on Parcel, but Parcel keeps importing an unchanged CSS file. There is a correctly processed file in the dist folder, but Parcel imports another file in the Dist folder that was never processed. source file structure:

index.html
Terminal.html
StyleSheets
-->index.pcss
-->Terminal.pcss
Scripts
-->index.js
-->Terminal.js

And here is my parcel.config.js

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('cssnano'),
    require('precss')
  ]
}

score 0 · Accepted Answer · answered Jun 19 '20 at 21:20

It turns out that, instead of putting the plugins in parcel.config.js you should put them in .postcssrc like this:

{
  "modules": false,
  "plugins": {
    "autoprefixer": {
      "grid": true
    },
    "cssnano": {

    },
    "precss": {

    }
  }
}

Parcel PostCSS preprocessing /dynamic imports not working

1 Answers1