To style our shopping cart app, we will use Bootstrap 4 with Sass.
Open the shopping cart project and install Bootstrap.
At the time of writing this, Bootstrap 4 is still in alpha:
>> npm install [email protected]
Import it in the client/index.js file like any JavaScript module:
Meteor will add it to the head, and the browser will reload automatically; you will immediately note a difference in the design. The fonts and links will be styled and the app will look a little better.
As I mentioned earlier, everything in CSS is global.For example, what will happen if we, accidentally, have the same class name defined twice with a different value for the same property:
.shopping-cart-btn{
background-color: red;
}
In another CSS file we have the same class name but this time we have a blue for background-color:
.shopping-cart-btn{
background-color: blue;
}
The overriding priority in...