twitter-bootstrapsassbootstrap-4autoprefixer

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

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.

Solution

  • 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