SCSS Bootstrap 4 customization via standard Bootstrap 4 variables

[Tom]

Hello,

I'm setting up Angular - Bootstrap 4 project with SCSS support and thinking about use Syncfusion Angular components as main UI framework for new web app. There are some problems/questions with that approach.

I have standard Bootstrap 4 custom theme setup in my styles.scss file:

$enable-validation-icons: true;

$enable-pointer-cursor-for-buttons: true;

$body-bg: white;

$font-family-sans-serif: 'Roboto Condensed';

$font-family-monospace: 'Roboto Mono';

$font-size-base: 0.8rem;

$theme-colors: (

primary: #DD2E44,

secondary: #f0f0f0,

info: #7EBCFA,

success: #28A745,

warning: #FFC107,

danger: #DC3545);

$input-btn-focus-width: 2px;

$badge-font-size: 9px;

@import '~bootstrap/scss/bootstrap';

@import '~@syncfusion/ej2-angular-dropdowns/styles/bootstrap4.scss'; // Syncfusion part

I thought that Syncfusion components are using these standard Bootstrap 4 variables to setup components theme but then I found in your repos _bootstrap4-definition.scss files which containing absolute values of your own variables used by other Syncfusion scss files.

Is there any way to setup your framework to use standard Bootstrap 4 variables?

Regards,

Tom

[Jesus Arockia Sankaran S]

Hi Tom, 

Greetings from Syncfusion. 

We can override the Syncfusion component styles using standard Bootstrap 4 variables as shown in the snippet and reference image below where we have changed the primary variable color of Bootstrap to "Red" and it is applied in our Syncfusion component that you can get the sample form the link below.  

Code Snippet 1: (order of importing scss files for calendar component) 

@import '../node_modules/bootstrap/scss/bootstrap.scss'; 

@import '../node_modules/@syncfusion/ej2-base/styles/bootstrap4.scss'; 

@import '../node_modules/@syncfusion/ej2-angular-buttons/styles/bootstrap4.scss'; 

@import '../node_modules/@syncfusion/ej2-angular-calendars/styles/bootstrap4.scss'; 

Code Snippet 2: (changing primary variable color) 

$primary:       red !default; 

Reference Image: 

 

Sample: http://www.syncfusion.com/downloads/support/forum/145177/ze/angular-bootstrap4-1983497608 

Please get back to us if you need any further assistance on this.  

Regards, 

Jesus Arockia Sankaran S 

 

[Tom]

Hi,

Thanks for the answer but setting up colors is simple case. 

How about using other Bootstrap 4 variables in Syncfusion SCSS files? There are a lot of customization that is possible in Bootstrap 4 custom theme - https://github.com/twbs/bootstrap/blob/master/scss/_variables.scss

Is there any way to use those variables without spying at every Syncfusion SCSS _bootstrap4-definition.scss file and overriding one variable after another for each component?

Regards,

Tom

[Jesus Arockia Sankaran S]

Hi Tom, 

Sorry for the inconvenience. 

Question	Answer
How about using other Bootstrap 4 variables in Syncfusion SCSS files?	We developed our Bootstrap 4 theme with its specifications, but we only provided support to override the color variables.
Is there any way to use those variables without spying at every Syncfusion SCSS _bootstrap4-definition.scss file and overriding one variable after another for each component?	We currently need to override the specific component variables in order to customize it.

Please get back to us if you need any further assistance on this. 

Regards, 

Jesus Arockia Sankaran S 

[Tom]

Ok. Thanks.

Regards,

Tom

[Jesus Arockia Sankaran S]

Hi Tom, 

  

Thanks for your update. 

Regards, 

Jesus Arockia Sankaran S