Building StyleSheets Using the Angular CLI
Aug 26, 2020 • 4 Minute Read
Introduction
The Angular CLI is an extremely powerful part of the Angular JavaScript framework. By exposing a simple and robust API in front of its build system, the Angular CLI gives you the ability to quickly and easily bundle CSS stylesheets with your app. In this guide, you will learn how to choose a CSS preprocessor when creating a new app and how to take advantage of the aforementioned API.
Let's dive in!
Optionally Choosing a CSS Preprocessor
The Angular CLI can be downloaded onto your machine by running the following command using NPM:
npm install -g @angular/cli
You can now use the ng command to access the CLI. To see a full listing of available commands, run ng -h.
Firstly, you will need to create a new Angular app to test with. Bootstrapping an Angular app via the CLI is as simple as running:
ng new testing-css
This command will create a new Angular app within your current directory that is named testing-css. In the process of creating your new Angular app, you will be prompted as to what CSS preprocessor (if any) you would like to use. Your options include:
- CSS
- SCSS
- Sass
- Less
- Stylus
This choice sets the initial state of your Angular app in regards to the stylesheet format. You can always change this state by editing your project's angular.json file. For example, to ensure that new components are generated with a .scss file, you can add or alter this portion of your angular.json:
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
}
Including External Stylesheets
The above capability is nice but what if you need to include external stylesheets into your production build cleanly and safely? The Angular CLI and its accompanying build system have you covered here as well. By configuring the angular.json file appropriately, you can tell Angular to build any number of stylesheets into your app. A common example would be bringing in Twitter Bootstrap. Below, you can check out an example of an angular.json file that is set to include Bootstrap.
"projects": {
"testing-css": {
....
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
....
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.css",
"src/styles.css"
]
....
By altering the styles array field of your project's angular.json file, you can easily configure which CSS files you want to include in your project. If the stylesheet you want to include happens to be an SCSS file (or another CSS preprocessor), instead of altering the angular.json file, be sure to simply import the file you need directly into your global stylesheet. For example, if your app uses SCSS, your import would look like this:
@import "~bootstrap/scss/bootstrap.scss";
This will have the same effect as the above method in terms of your build.
Conclusion
In this guide, you learned how to build styles using the Angular CLI. Specifically, you saw how you can set the stylesheet format both initially, at app creation, and by altering the angular.json file directly. Finally, you learned how to include external stylesheets into your build via way of more configuration of the angular.json.
And that's it! You can now be confident when it comes to building and bundling stylesheets via the Angular CLI and its accompanying build system. For more information, please check out this documentation.
