Sharing Top Content from the Angular-sphere.

Using Sass with the Angular CLI ― Scotch

  • Create a new project with Sass with the following: – ng new my-sassy-app –style=scss – You can also set the –style flag with the a Current App to Sass – If you’ve already created your Angular CLI app with the default .
  • You’ll find the new config line at the bottom of the file: – “defaults”: { – “styleExt”: “scss”, – “component”: { – } – } – Changing the CSS Files to Sass – The Angular CLI will start processing Sass files now.
  • For instance, let’s create a brand new CLI app: – ng new my-sassy-app –style=scss – Next, we’ll create the following files: – |- src/ – |- sass/ – |- _variables.scss – |- _mixins.scss – |- styles.scss – To start using these new Sass files, we’ll import the _variables.scss and _mixins.scss…
  • In the Angular CLI, all components are self-contained and so are their Sass files.
  • scss – – @import – ‘~bootstrap/scss/functions’, – ‘~bootstrap/scss/variables’, – ‘~bootstrap/scss/mixins’, – ‘~bootstrap/scss/print’, – ‘~bootstrap/scss/reboot’, – tilde (~) makes importing Sass files in the Angular CLI super easy!

If you want a quick intro into the Angular CLI, check out the official docs and our Use the Angular CLI For Faster Angular v2+ Projects.

One of the first things you’ll usually do in a project is to bring in Sass to make working with CSS easier.

When working with the Angular CLI, the default stylesheets have the .css extension.

Let’s explore how we can easily bring in Sass to our Angular CLI projects.

If you want a quick intro into the Angular CLI, check out the official docs and our Use the Angular CLI For Faster Angular v2+ Projects.

Starting an Angular CLI Project with Sass

Normally, when we run ng new my-app, our app will have .css files. To get the CLI to generate .scss files (or .sass/.less) is an easy matter.

Create a new project with Sass with the following:

ng new my-sassy-app –style=scss

You can also set the –style flag with the a Current App to Sass

If you’ve already created your Angular CLI app with the default .css files, it will take a bit more work to convert it over. You can tell Angular to start processing Sass files with the following command:

ng set defaults.styleExt scss

This will go ahead and tell the Angular CLI to start processing .scss files. If you want to peek under the hood at what this command did, check out the Angular CLI config file: .angular-cli.json.

You’ll find the…

Using Sass with the Angular CLI ― Scotch

Comments are closed, but trackbacks and pingbacks are open.