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.
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