Installing an extension tool on Visual Studio is quite easy; from the topmost menu, select Tools | Extensions and Updates, and then click to the Online item tree to the left. Once there, start a search using the LESS Compiler keyword and locate the LESS Compiler by Mads Kristensen:
During the installation phase, you will be asked to quit and restart Visual Studio, so be sure to save everything before doing it.
Once done, use the Solution Explorer to navigate to the /AppClient/app/components/app/app.component.css file and rename it to app.component.less. A warning popup will appear, informing you that the file can become unusable and asking for a confirm; choose YES, and then open the new file.
You should see something like the following:
See the HUD-like screen near the lower-right corner? This is how the LESS Compiler tells us about what it will do upon build, either globally and for the currently opened file; both settings can be changed by clicking on them. For our specific purposes, we just need to change the Project settings value from Off to On. Do that, and then update the file content by adding a single comment on top in the following way:
// our first LESS file
@media (max-width: 767px) {
/* On small screens, the nav menu spans the full width of the screen. Leave a space for it. */
.body-content {
padding-top: 50px;
}
}
Once done, Save your file and look at the Solution Explorer to see what happens. The LESS compiler should automatically detect the updated content and compile the file accordingly; after a couple seconds, you should see something like this:
That's it, our .less source file has been compiled into its corresponding .css and .min.css files. If we open them, we can see how the first one hosts the human-readable version of the CSS-compatible code, while the latter contains the minified version. From now on, it will happen automatically upon Save, so we can just forget about it and concentrate on our styling.
Before continuing, rename all the other component's CSS files to give them the .less extension like we just did with the app.component.css file; we'll do that anyway sooner or later, hence it's better to get it over and done with.