Using LESS in your Angular 9 Project

ng new my-app

Running the above angular cli command will give you a shiny brand new workspace and app. Chances are you may mistakenly or hastily select the defaults when prompted for information about features to include in the initial app.

It is all cool if you are a master CSS bender and manipulator but let's face it, down the road when your projects get larger you tend to get exhausted writing vanilla CSS (if that's a thing).

Re-introducing: CSS Preprocessors

CSS preprocessor takes the work out of writing your styles (well almost). It gives you features like variables, nesting, escaping, imports, mixins and so much more. Less is an example of this. It gives you a cleaner and efficient way of styling components.

Now: Putting LESS in Angular

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

Running the above instructs Angular to use less as the default stylesheet format.

"schematics": {
    "@schematics/angular:component": {
      "style": "less"
    }
  }

You should see the above changes to angular.json file.

Next: Changing all occurrences

VSCode has a neat feature to change all occurrences at once.

Here we go again

ERROR in ./src/app/app.component.ts
Module not found: Error: Can't resolve './app.component.less' in '/Users/tbo/my-app/src/app'
ERROR in ./src/app/dashboard/dashboard.component.ts
Module not found: Error: Can't resolve './dashboard.component.less' in '/Users/tbo/my-app/src/app/dashboard'
ERROR in ./src/app/home/home.component.ts
Module not found: Error: Can't resolve './home.component.less' in '/Users/tbo/my-app/src/app/home'
ERROR in ./src/app/landing/landing.component.ts
Module not found: Error: Can't resolve './landing.component.less' in '/Users/tbo/my-app/src/app/landing'
ERROR in ./src/app/profile/profile.component.ts
Module not found: Error: Can't resolve './profile.component.less' in '/Users/tbo/my-app/src/app/profile'

Angular complains of not finding the module which makes sense since we changed all references but the file name remain unchanged.

This stack overflow answer shows you how to rename bunch of files extensions. Just so we are clear make sure you in the src folder when running the command. You can thank me later.

Finally

Since all that is out of the way. Now you can do:

This:

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

This:

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}



#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}

And that:

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

Ha! Exciting times to be a developer.