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

Question

I have recently started using the scss files, especially to customize Bootstrap.

To compile my scss files (and also bootstrap) i use sa

Answer 1

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