Quick Tip: How to use SCSS in Angular CLI 6

Configure SCSS for your next Angular project.

If you’re familiar working with SCSS in Angular CLI 1.x before and now you’re wondering how to use it in version 6, a brand new version that comes with Angular 6, I’m here to help.

Sass logo
The Sass logo

This is how the style config in the CLI v1.x looks like in .angular-cli.json file.

"defaults": {
  "styleExt": "scss",
  "component": {}
}

But if you take a look into a config schema of angular.json file in version 6, you will no longer find this config anymore. But don’t worry, Angular CLI team got it cover in much easier way. To use SCSS, simply import you scss files (the default value is src/styles.scss) in your project level in an angular.json file like this.

{
  ...
  projects: {
    [your_project_name]: {
      ...
      architect: {
        build: {
          ...
          options: {
            styles:{
              "src/styles.scss"
            }
          }
        }
      }
    }
  }
}

That’s it, you’re good to go with SCSS! No any other config needed because CLI team just got it covered so you don’t have to tell the config which CSS-preprocessor is gonna be used anymore. By dig deeper in their build script (node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/styles.js), I’m pretty sure that you can include any type of .css, .sass, .scss, .less or .styl (stylus) and start your CSS coding right away. I’ve tried it, very easy!

Plus, they also provide the way to config target browsers for autoprefixer easily. You can find a file name browserslist in src folder and change the target browsers for your autoprefixer. I haven’t tried that yet, let me know your result if you already tried it.

This is just an example of a post. The original is here: https://medium.com/@vissanu_s/quick-tip-how-to-use-scss-in-angular-cli-6-63d263b3481c

Did you like it? Why don't you try also...

How to setup TypeScript with Laravel and Vue

In this post we'll see how setup the Typescript and how use it in a project built with Laravel and Vue.

What are and how to use Observables in RxJS

Learn all that you need to know about Observables.

How to build an Electron app using create-react-app. No webpack configuration or “ejecting” necessary.

Build a fantastic Electron app from scratch using create-react-app.