CODEWITHSUNDEEP
htmlcsstwitter-bootstrapsass
Sainul Abid
Sainul Abid

Reputation: 99

How to modify bootstrap 4 with sass without editing bootstrap css

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";

Upvotes: 0

Views: 446

Answers (1)

Olusola Omosola
Olusola Omosola

Reputation: 905

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.

Upvotes: 1

Related Questions