14

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.

WhiteLine
  • 1,919
  • 2
  • 25
  • 53

4 Answers4

10

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

enter image description here

Sass Folder Structure

enter image description here

Ismail Farooq
  • 6,309
  • 1
  • 27
  • 47
  • Hi, thanks for your help. Some considerations: 1) I need to change my CLI SASS compiler from [this](https://sass-lang.com/install) to [this](https://github.com/sass/node-sass), correct? 2) Before i used sass globally, it was not installed inside the individual projects, i would like to continue using it like this, if it's possible 3) It's possible to not use the onchange package? I prefer to compile scss files manually when i need them – WhiteLine Feb 08 '19 at 08:02
  • See example here https://jsfiddle.net/e5rxLq4p/ @WhiteLine now you have to run npm start on your command every time when you need to compile – Ismail Farooq Feb 08 '19 at 09:24
  • 1) Correct, Node sass basically is node package that compiles sass to css 2) What do you mean can you please clear little more 3) onChange just detect your file change i haven't tried manually compilation but i am sure it will possible try by changing Script > Start command in package.json – Ismail Farooq Feb 08 '19 at 09:44
  • ... for point 2) I meant that in my web projects i don't use any package manager to maintain the dependencies of the various libraries i use. I started to use NPM to download sass and be able to use it from the terminal to compile my scss files present in my web projects (all in a network folder). I installed sass globally on my Mac, and pointing to the various web projects in my network folder (which contains all my web projects) I compile the scss files manually every time I edit a scss file in a project. – WhiteLine Feb 09 '19 at 15:31
  • Example: `sass /path-to-network-folder-projects/project1/scss/main.scss /path-to-network-folder-projects/project1/css/main.css -t compressed -C --sourcemap=none` – WhiteLine Feb 09 '19 at 15:31
8

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

Alvin Konda
  • 2,898
  • 1
  • 22
  • 22
0

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

Sudipto Roy
  • 948
  • 8
  • 15
0

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

cyrus
  • 134
  • 1
  • 12