All Articles

Using Bootstrap 4 variables in Angular

I had a project where I need to use Bootstrap 4 in an Angular project. I need to use variables from Bootstrap 4 to make my components consistent with other parts of the app and I just want to share to the world how I did it. This is no way the best approach or practice to tackle this problem and if you think you have a better idea, please let me know.

Set up

Let’s create a new project by using the command ng new your-project-name

To add Bootstrap,

npm install bootstrap

Note that we can’t add Bootstrap via CDN because we need the SCSS files found in node_modules/bootstrap/scss/

Adding SCSS Add a new folder scss under your src directory. This is where we are going to save our scss files and Bootstrap-related scss files. Add a folder vendor/bootstrap or whatever name you want. I’m using 7-1 pattern here. Here’s a link from official sass site if you want to know more.

Let’s create a file _global.scss that will import the Bootstrap files we need. Inside the file, we can add

@import "node_modules/bootstrap/scss/bootstrap";

which will import all the Bootstrap files we need. This is not the recommended approach as you will see later. A better way is to add the files individually like this

//required
@import  '../../../../node_modules/bootstrap/scss/functions';
@import  "../../../../node_modules/bootstrap/scss/variables";
@import  "../../../../node_modules/bootstrap/scss/mixins";
// optional
@import  "../../../../node_modules/bootstrap/scss/reboot";
@import  "../../../../node_modules/bootstrap/scss/images";
@import  "../../../../node_modules/bootstrap/scss/grid";
@import  "../../../../node_modules/bootstrap/scss/root";
@import  "../../../../node_modules/bootstrap/scss/buttons";
@import  "../../../../node_modules/bootstrap/scss/button-group";
@import  "../../../../node_modules/bootstrap/scss/input-group";
@import  "../../../../node_modules/bootstrap/scss/forms";
@import  "../../../../node_modules/bootstrap/scss/transitions";
@import  "../../../../node_modules/bootstrap/scss/dropdown";
@import  "../../../../node_modules/bootstrap/scss/nav";
@import  "../../../../node_modules/bootstrap/scss/navbar";
@import  "../../../../node_modules/bootstrap/scss/card";
@import  "../../../../node_modules/bootstrap/scss/close";
@import  "../../../../node_modules/bootstrap/scss/utilities";

Now, we can now add this file in your styles.scss

/* You can add global styles to this file, and also import other style files */
@import  "./scss/vendor/bootstrap/global.scss";

To check if we have added Bootstrap correctly in your app, Here’s an example

<div  class="container">
	<div  class="jumbotron">
	<h1>Bootstrap is working!</h1>
	<a  class="btn btn-primary btn-lg"  href="#"  role="button">Learn more</a>
	</div>
</div>

Let’s say we want to change the text color of h1 to theme’s primary color. We can do it like this

h1 {
color: theme-color($key:  "primary");
}

We’re going to receive an error

ERROR in ./src/app/app.component.scss
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

  color:  theme-color($key: "primary");
         ^
      Function theme-color doesn't support keyword arguments
      in /home/brian/bri/angular-bootstrap/src/app/app.component.scss (line 4, column 11)
	: Failed to compile.

To fix this, we need to import the functions, variables and mixins from Bootstrap.

Open up app.component.scss again and add this line

@import  '../../node_modules/bootstrap/scss/functions';
@import  "../../node_modules/bootstrap/scss/variables";
@import  "../../node_modules/bootstrap/scss/mixins";
h1 {
color: theme-color($key:  "primary");
}

Your code is now working!

We are not done yet because we need to revisit our set-up. One caveat with using Bootstrap variables is that we need to import the 3 things I mentioned above. We’re going to create another file called _base.scss and add the imports there. Now your files should look like this

_global.scss

//required
@import  "./base";
// optional
@import  "../../../../node_modules/bootstrap/scss/reboot";
@import  "../../../../node_modules/bootstrap/scss/images";
@import  "../../../../node_modules/bootstrap/scss/grid";
@import  "../../../../node_modules/bootstrap/scss/root";
@import  "../../../../node_modules/bootstrap/scss/buttons";
@import  "../../../../node_modules/bootstrap/scss/button-group";
@import  "../../../../node_modules/bootstrap/scss/input-group";
@import  "../../../../node_modules/bootstrap/scss/forms";
@import  "../../../../node_modules/bootstrap/scss/transitions";
@import  "../../../../node_modules/bootstrap/scss/dropdown";
@import  "../../../../node_modules/bootstrap/scss/nav";
@import  "../../../../node_modules/bootstrap/scss/navbar";
@import  "../../../../node_modules/bootstrap/scss/card";
@import  "../../../../node_modules/bootstrap/scss/close";
@import  "../../../../node_modules/bootstrap/scss/utilities";

_base.scss

@import  '../../../../node_modules/bootstrap/scss/functions';
@import  "../../../../node_modules/bootstrap/scss/variables";
@import  "../../../../node_modules/bootstrap/scss/mixins";

Now in your app.component.scss

@import  "../scss/vendor/bootstrap/base";
h1 {
color: theme-color($key:  "primary");
}

That’s it. Thanks for reading!

Published 29 Jan 2019