Rendering Essential JS 2 Components with Booststrap3 SCSS variables

This example explains how to render the Essential JS 2 Components with Bootstrap3 SCSS variables.

Sample structure

src/index.html: The main file which contains the HTML elements of EJ2 components and it will be serve in the web browser.

src/index.js: The JavaScript file which initiates the EJ2 components.

src/datasource.js: The JSON data is maintained for data components. Example: DataGrid

styles/_bootstrap-variables.scss: Bootstrap3 SCSS variables are placed inside this file.

styles/_ej2.scss: EJ2 component Bootstrap theme styles are added in this file.

styles/index.scss: Reference of both Bootstrap3 and EJ2 Boostrap styles are added in this file.

Open the command prompt from the application folder and install the required npm dependecies by using the below command line.

npm install

Run the below command line to serve the application in the web browser. When running this command line, the SCSS files will be compiled into CSS file and stored in ~/src/index.css.

npm run serve

Change the values in ~/styles/_bootstrap-variables.scss and it will be reflecting in the Essential JS 2 components.