How to modify bootstrap 4 with sass without editing bootstrap css

Question

I am using bootstrap CDN and I need to override bootstrap with sass by creating new css for modified codes.

for eg: I have two bootstrap css, one is bootstrapcdn and another one is modified by sass (main.css). main.css also included bootstrap default classes and new/override classes created by sass. I need to save override/new classes as separate css file. How can I save override classes as new css by using sass?.

like below

<link rel="stylesheet" href="/path/to/bootstrap-cdn.css">
<link rel="stylesheet" href="/path/to/modified.css">

I have added new color variable named $tertiary like $primary and this is adding or modifying the bootstrap classes like

:root { --tertiary: #66F;} 
.list-group-item-tertiary {} 
.btn-outline-tertiary {}

I need to save this updated codes in to new css.

below is my files and it's structure if needed

|-- \bootstrap-scss
|   |   |-- \mixins
|   |   |-- \utilities
|   |   |-- variables.scss
|   |   |-- functions.scss
|   |   |-- ...more bootstrap scss files
|-- \custom-scss
|   |   |-- _custom.scss
|   |   |-- _variable.scss
|   |   |-- main.scss

_variables.scss

    $tertiary:          #66F;
    $theme-colors: () !default;
    $theme-colors: map-merge(
      (
        "tertiary":    $tertiary),
      $theme-colors
    );

main.scss

@import "variables";
// Bootstrap and its default variables
@import "../bootstrap-scss/functions";
@import "../bootstrap-scss/variables";
@import "../bootstrap-scss/mixins";
// Optional
@import "../bootstrap-scss/ all scss files ";
@import "custom";

I'm not getting your question, are you getting css output you was looking for? the question is "how to save it"? — godblessstrawberry
– godblessstrawberry, Commented Aug 18, 2018 at 9:18
Ok, I have two bootstrap css, one is bootstrapcdn and another one is modified by sass (main.css). main.css also included bootstrap default classes and new/override classes created by sass. I need to save override/new classes as separate css file. How can I save override classes as new css by using sass?. — Sainul Abid
– Sainul Abid, Commented Aug 19, 2018 at 1:44
which scss compiler do you use now? e.g. if you use regular scss CLI compiler then the css path is specified there scss --watch assets/scss:assets/css --style=compressed. this command watches for changes in /assets/scss folder and saves minified css into /assets/css folder from where you include your css afterwards note you need ruby and scss installed for that sass-lang.com/install — godblessstrawberry
– godblessstrawberry, Commented Aug 19, 2018 at 5:41
I am using sass and it's working perfect, there is no issue with compile or override the files. the problem is the compiled css also included all the default classes + added/updated classes. I don't want the bootstrap default classes in the new compiled css because I already included bootstrap cdn. I need only the updated/added classes in the compiled css. — Sainul Abid
– Sainul Abid, Commented Aug 19, 2018 at 8:44

Olusola Omosola · Accepted Answer · 2018-08-19 02:06:30Z

1

Make sure the file with the preferred styles is selected last. You can also add '!Important' to the preferred classes, particularly if you need to override.

answered Aug 19, 2018 at 2:06

Olusola Omosola

9159 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to modify bootstrap 4 with sass without editing bootstrap css

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related