📌 Improve your Angular CLI skills with this free Angular CLI course on Pluralsight

Overview

In this tutorial I am using version 12.0.1 of the Angular CLI.

When you create a component using the Angular CLI, you run the command:

ng generate component HomePage

When this command completes, 4 files are created for your component:


home-page.component.html (The HTML for your component)
home-page.component.css (This is the file we will focus on, I will show you how to change the default style sheet type in a moment)
home-page.component.spec.ts (For Unit Tests)
home-page.component.ts (The typescript file that holds the logic for your component)

How to Change the Default Style Sheet for your Component to .scss

In most of my Angular apps I prefer to use .scss files, but whenever I was generating a new component it was defaulting the generated style sheet to a .sass style sheet.

It can be a bit of a pain (although a minor one) to rename newly generated style sheets to .scss, so let's update the default version so we don't have to manually change the file type.

The solution is to update the angular.json file in the root of your Angular App.

Towards the top of your angular.json file, you will see a property in the schematics section called @schematics/angular:component.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "BrendanSlukeDotCom": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "sass" <--- We want to update this
        },
        "@schematics/angular:application": {
          "strict": true
        }
      },

I changed mine from "style": "sass" to "style": "scss".

Moving forward all of my components will be generated with a .scss style sheet in the future! 🎉

How to Change the Default Style Sheet for Your Component to .sass

For the same exact property, @schematics/angular:component in your angular.json file, change the value to "style": "sass".

How to Change the Default Style Sheet for Your Component to .css

For the same exact property, @schematics/angular:component in your angular.json file, change the value to "style": "css".

📌 Improve your Angular CLI skills with this free Angular CLI course on Pluralsight
Related Blog Posts