StackBlitz: A simple Angular, scss and ng-bootstrap setup
Atualizado: 16 de jun. de 2021
Just clone the workspace bellow and you are ready to go.
Angular 8, Sass and Bootstrap 4.x.x workspace
We love Stackblitz at Inflight IT. It helps us to easily create a workspace where we can put our experiments and, mainly, the firsts drafts of our sharable components and, since one of our projects uses AngularJS (8.x), scss and ng-bootstrap (with Bootstrap v4.x.x), we often need a workspace like this one to do some magic 🎩.
Let’s craft our hammer
First and foremost we create a new Angular workspace and there we have an Angular project set up for free 👌🏻
Stackblitz.com — start a new workspace
After creating a new Angular workspace, in order to add Scss we need to change all style files extension to [filename].scss — yes, it is as simple as that 😅.
⚠️ Don’t forget to change all the style imports — In a brand new Angular workspace you need to change app.component.ts and angular.json files.
The following steps are exactly the same as those we have to do in a local set up: Install bootstrap NPM package, import the main module to AppModule and add Bootstrap style.
Stackblitz has an in-browser NPM client that consists in a simple input where we can add NPM packages just by typing in the NPM package name.
Stackblitz — Dependencies section
Since we are using Angular 8x, make sure that firstname.lastname@example.org is installed (dependencies table)
Import main module to NgModule
Just by following ng-bootstrap installation guide, add the following code to app.module.ts
app.module.ts — include main ng-bootstrap module
Import Bootstrap style
Finally, we include bootstrap.min.css in our index.html file and we are ready to go!
index.html — include bootstrap style
Time to give it a go!
Using this workspace, get a random component from ng-bootstrap components page, c&p the code and add it to app.component.ts.
Good coding :)