[Tutorial] Using Bootstrap 4 with SCSS in your Angular app
Bootstrap can be a very powerful front-end framework to quickly make your app look great, but there's a lot of pre-defined styles that you'll probably end up changing. For this reason using Bootstrap in combination with SCSS is great; you can easily change the variables that Bootstrap uses, so that you have a lot more control over the look and feel without having to override styles afterwards.
Using Bootstrap 2 or 3 with SCSS used to be a matter of including the bootstrap-sass
NPM package in your project. For Bootstrap 4 this isn't the case anymore. All the documentation for bootstrap-sass says about it is:
This is Bootstrap 3. For Bootstrap 4 use the Bootstrap Ruby gem if you use Ruby, and the main repo otherwise.
This isn't very helpful for developers just starting out, so here's how you use "the main repo" of Bootstrap 4 in your Angular 2+ application.
Requirements
- NPM and Node
- An Angular 2+ app (or Angular-CLI installed and ready to start a new project)
Configuring Angular-CLI to use Sass
If you're starting a new project using the Angular CLI, use the following command to prepare it to use SCSS:
ng new My_New_Project --style=scss
If you already started a project and want to upgrade it to use SCSS instead of regular CSS, use:
ng set defaults.styleExt scss
After this, make sure to rename your .css
files to .scss
. Also update your .angular-cli.json
file to point to the correct main styles file (by default this is styles.css
, this should now be styles.scss
).
Installing Bootstrap 4
Installing from NPM is easy as pie:
npm install [email protected]
To use it, add the following import statement to your own styles.scss
file:
@import '~bootstrap/scss/bootstrap';
Using variables for Bootstrap
The whole purpose of using Bootstrap with SCSS was to make use of variables. Here's how to do that:
- Create your own variables file, for example in
app/_variables.scss
. In it, add your first variable just so we can test it all works:
$body-bg: hotpink;
- Import your variables file before importing Bootstrap. Your first two lines of
styles.scss
should be:
@import 'app/variables';
@import '~bootstrap/scss/bootstrap';
This makes sure that when Bootstrap's SCSS gets parsed to CSS, all the variables you defined are used. If all went well, your page should now something like this:
Success! Let me know if this worked for you, or if you have any issues.
Hey, do you mind making a post about how to use Angular? I've wanted to learn how to use it for a while, but I haven't found a good tutorial. Is it there something in NPM like
create-react-app
that creates a ready-to-use boilerplate for an Angular app?Sure, I can do that! Angular has a similar tool (Angular-CLI) which enables you to quickly generate an app, and it's components/services etc. I'm currently working on a different tutorial, but a basic starters guide for angular shouldn't be a problem. I'll keep you posted!
Thanks! I'm looking forward it!
Congratulations! This post has been upvoted from the communal account, @minnowsupport, by Phtephan from the Minnow Support Project. It's a witness project run by aggroed, ausbitbank, teamsteem, theprophet0, and someguy123. The goal is to help Steemit grow by supporting Minnows and creating a social network. Please find us in the Peace, Abundance, and Liberty Network (PALnet) Discord Channel. It's a completely public and open space to all members of the Steemit community who voluntarily choose to be there.
If you like what we're doing please upvote this comment so we can continue to build the community account that's supporting all members.