Use SASS (from command line) and Autoprefixer (for

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

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

Answer 2

I guess you are using npm to convert scss to css.

Just need to install postcss which comes inbuilt with autoprefixer plugin. Then in place of sass in commandline you need to use postcss in commandline to convert to css. please refere to https://www.npmjs.com/package/postcss#npm-run--cli

Answer 3

can't you keep the bootstrap and your custom css different . as traditionally we try to overwrite bootstrap with our custom css by using another external style , similarly if you want to learn sass try to create your new external stylesheet with sass , leaving the bootstrap code untouch and add your custom style below bootstrap import by only including main.scss which include your custom styles

Answer 4

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