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.
Top comments (0)