Cannot find module autoprefixer in NPM scripts

Question

Under windows 10 and npm version 6.9.0, I cannot get the following script to work:

"build:css": "postcss --use autoprefixer -b 'last 2 versions' < ./static/css/main.css"  

I'm always getting same error in the Windows console as follows:

Plugin Error: Cannot find module 'autoprefixer'

I've tried changing the syntax to the following one with no results:

"build:css": "postcss --use autoprefixer -b \"last 10 versions\" ./static/css/main.css -o ./static/css/main-prefixed.css"

Can anyone tell me whats the problem in here? Honestly, I'm quite new to this npm script.

My package.json looks like this:

{
  "name": "test-automate-npm",
  "version": "1.0.0",
  "description": "test",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "scss": "echo 'Compiling SCSS' && node-sass --watch scss -o ./static/css",
    "build": "npm run scss && npm run build:css",
    "build:css": "postcss --use autoprefixer -b 'last 2 versions' < ./static/css/main.css"   
  },
  "keywords": [
    "keywords",
    "here"
  ],
  "author": "Barleby",
  "license": "ISC",
  "dependencies": {
    "node-sass": "^4.12.0"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.1",
    "postcss": "^5.0.16",
    "postcss-cli": "^2.5.0"
  }
}

Thank you in advance!

---

Edit:

I've also tried defining the npm script named build:css in package.json as follows:

"build:css": "postcss ./static/css/main.css autoprefixer -b \"last 10 versions\" -o ./static/css/main-prefixed.css"

and this results in the following error printed to the console:

You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on postcss.parts and use them in postcss.config.js.

Answer 1

1. Create a new file named postcss.config.js that contains the following content:

   module.exports = {
     plugins: {
       autoprefixer: {
         browsers: ['last 10 versions']
       }
     }
   };
   

   Save the newly created postcss.config.js file in the root of your project directory, i.e. save it in the same directory where package.json resides.

2. Change the npm script named build:css in your package.json to the following:

   ...
   "scripts": {
     ...
     "build:css": "postcss ./static/css/main.css -o ./static/css/main-prefixed.css"
   },
   ...