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 sass from the command line.

Example :

sass /path/to/scss/bootstrap/mycustom.scss /path/to/css/bootstrap.min.css -t compressed -C --sourcemap=none

mycustom.scss is something like that:

 $theme-colors: (
     "custom-primary": "...",
     "custom-secondary": "..."
 );
 ....
 ....
 @import "bootstrap";

This way i can customize bootstrap to my pleasure, without problems.

---

Today, however, i realized that a graphic component (custom-select) was not rendered correctly. After some research i found that this was caused by the lack of Autoprefixer during compilation, and therefore some css properties were not added to my bootstrap.min.css.

I found this on Bootstrap documentation: https://getbootstrap.com/docs/4.2/getting-started/build-tools/#autoprefixer

But i can not find a solution to compile Bootstrap (with sass) using Autoprefixer.

Answer 1

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

Answer 2

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