Using LESS in your Angular 9 Project
Tags: angular, webdev, javascript
Published: 2020-06-17 22:37:32

---
title: Using LESS in your Angular 9 Project
published: true
description: 
tags: angular, webdev, javascript
cover_image: https://i.ibb.co/tKQqt7F/painting-wallpaper-1070527.jpg
---
```shell
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][1] is an example of this. It gives you a cleaner and efficient way of styling components.

## Now: Putting LESS in Angular

```console
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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f5ktja0juiekv3n3f8gl.gif)

## Here we go again

```shell
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][2] 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:
```css
@width: 10px;
@height: @width + 10px;

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

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



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

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

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

Ha! Exciting times to be a developer.

[1]: http://lesscss.org/
[2]: https://stackoverflow.com/a/27285610/11074007