Published on 1 min read
Setting Up a CSS Preprocessor in Angular CLI
Would you like to integrate your favorite CSS Preprocessor (Sass/SCSS, Less or Stylus) with Angular CLI?
Angular CLI supports the popular CSS Preprocessors built-in: Sass/SCSS, Less and Stylus. Respectively, these formats are supported: sass, scss, less and styl.
In this post, we’re going to use scss as an example.
Starting a New Project
In case your project hasn’t been generated yet, you can set one of the supported CSS preprocessors while generating the project:
ng new sample-project --style=scssUpdating an Existing Project
In case your project was generated, but you want to set a preprocessor – you can change the default:
ng set defaults.styleExt scssFrom now on, as soon as generating a new component – Angular CLI will create the style file with an appropriate format.
All that we’ve left is to adjust all styles in the project to the new format (actual file format and styleUrls metadata).
Note: Don’t forget to adjust the main styles file in angular-cli.json as well.
That’s it for today.
You’re welcome to share:
Enjoyed this post?
I’d love for you to follow me and join my newsletter.
Comments are powered by DisqusDetails
Loading comments activates Disqus, which collects information as a third-party service.
The site owner has no access to or control over the information collected by Disqus.
Related Posts
ECMAScript - Introducing Deferred Module Evaluation with import defer
8 min read
Introducing the “import defer” proposal, a new ECMAScript import form that loads and links modules eagerly while deferring their evaluation until a namespace property is first accessed - currently at stage 3 in the TC39 process.
Read post
ECMAScript - Introducing BigInt Primitive in ES2020 (ES11)
5 min read
Introducing the "BigInt" proposal, a new primitive of arbitrary precision integers, which has been reached stage 4 in the TC39 process and is included in the language specification of 2020 - the 11th edition.
Read post
ECMAScript - Introducing Dynamic Imports in ES2020 (ES11)
6 min read
Introducing the "Dynamic Import" proposal, arriving with new import() keyword enabling to load a module on demand at runtime, which has been reached stage 4 in the TC39 process and is included in the language specification of 2020 - the 11th edition.
Read post