Configuring Angular 7 project with SASS, bootstrap, and Angular material design.

Angular + Styles

What I will learn from this article?

  1. How to create Angular 7 application with SCSS style files.
  2. Converting existing Angular CSS project to SCSS style sheet.
  3. Configuring bootstrap CSS.
  4. Configure angular material design.
Angular 7 App with Angular material, SCSS and bootstrap

1. Creating Angular application with SCSS style files.

Normally, when we run ng new my-app, our app will have .css files. To get the CLI to generate .scss files (or .sass/.less) is an easy matter.

Run the below command in the project root directory.

ng new my-first-app --style=scss

You can also set the --style flag with the following:

  • --style=scss
  • --style=sass
  • --style=less

2. Converting existing Angular CSS project to SCSS style sheet.

If you’ve already created your Angular CLI app with the default .css files, it will take a bit more work to convert it over. You can tell Angular to start processing Sass files with the following command

From Angular 6 to set new style on existing project with CLI:

Run the below command in the project root directory.

ng config schematics.@schematics/angular:component.styleext scss

Or modify directly into angular.json manually:

"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
}

Changing the CSS Files to Sass

The Angular CLI will start processing Sass files now. However, it doesn’t go through the process of converting your already existing .css files to .scss files. You'll have to make the conversion manually.

3. Configuring bootstrap

Run the below command in the project root directory.

npm install --save bootstrap

Now that we have Bootstrap, let’s look at how we can include the basic CSS file. This is an easy process by adding the bootstrap.css file to our .angular-cli.json config:

"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"sass/styles.scss"
],

NOTE: Sometimes adding (../) works.

"styles": [
"node_modules/bootstrap/dist/css/bootstrap.css",
"sass/styles.scss"
],

Importing Sass Files Into Angular Components

We have new _variables.scss and _mixins.scss files that we will probably want to use in our components. In other projects, you may be used to having access to your Sass variables in all locations since your Sass is compiled by a task runner.

In the Angular CLI, all components are self-contained and so are their Sass files. In order to use a variable from within a component’s Sass file, you’ll need to import the _variables.scss file.

One way to do this is to @import with a relative path from the component. This may not scale if you have many nested folders or eventually move files around.

// src/app/app.component.scss

@import '~sass/variables';

// now we can use those variables!

4. Configuring Angular material design.

Angular material is part of the package developed by Angular team which gives set of a pre-built component. It is not a styling package it is an angular package. It uses Google’s material design. It is easy to add and can be customized with our own CSS/SASS styles. Using the Angular CLI( version 6+) ng add command will update your Angular project with the correct dependencies, perform configuration changes and execute initialization code.

Run the below command in the project root directory.

ng add @angular/material

once it is installed successfully, you will see this.

Styles in angular.json file

Angular material uses Animation. So, below module will be added in the app.module.ts file.

import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations’;

Angular material module will not be available by default to save the space of the application. You have to import whatever module you needed from ‘@angular/material’;

See the angular application with material design on the stakblitz URL.

Read more on material design