Use SASS (from command line) and Autoprefixer (for Bootstrap 4.x)

After i have installed globally post-css and autoprefixer

npm install -g postcss-cli autoprefixer

i run the following command to reload my CSS file with autoprefixer.

postcss assets/theme.css --replace --use autoprefixer

Note: I will update this post once i have worked on for one command that both handle SASS CLI and Autoprefixer

Edit-1: You can combine 2 terminal commands and compile and minify Bootstrap SCSS, then run Autoprefixer to add vendor prefixes like this with just one command:

sass scss/theme.scss:assets/theme.min.css --style=compressed && postcss assets/theme.min.css --replace --use autoprefixer

This is the exact same issue I was facing. So I look alot on the internet and found one possible solution for this issue. You can fix this issue by using NPM (Node Package manager). Read this or this Article

What you Need,

Create a package.json file or run npm init

Create your command as mention in the article

Add your devDependencies in your case node-sass autoprefixer onchange and postcss-cli

Run npm install, (once all package installed)

Run npm start

This is how I do For Example

package.json

{
  "name": "web_name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "devDependencies": {
    "autoprefixer": "^9.4.2",
    "node-sass": "latest",
    "onchange": "^5.2.0",
    "postcss-cli": "latest"
  },
  "scripts": {
    "build:sass": "node-sass --output-style=expanded --source-map=true assets/scss/style.scss assets/css/style.css",
    "prefix": "npm run build:sass && postcss assets/css/style.css --use=autoprefixer --output=assets/css/style.css",
    "start": "onchange \"assets/scss/**/*.scss\" -- npm run prefix"
  },
  "browserslist": [
    "last 2 versions"
  ],
  "repository": {
    "type": "git",
    "url": "Repo/Path"
  },
  "keywords": [
    "SASS"
  ],
  "author": "Ismail Farooq",
  "license": "ISC",
  "homepage": "Path",
  "dependencies": {}
}

Root Structure

Sass Folder Structure