1

I am including scss file as given below:

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
    ....,
    styleUrls: ['../../scss/dashboard_admin.scss'],
    encapsulation: ViewEncapsulation.None
})
export class DashboardAdminComponent implements OnInit {
.....

It is compiling the SCSS to CSS very well, but loading the styles in <styles> tag, I would like to include them as separate CSS file.

Here is the SCSS related config from .angular-cli.json

"defaults": {
     "styleExt": "scss",
     "component": {}
}
Vikram
  • 622
  • 1
  • 6
  • 18

1 Answers1

0

Because if your project isn't configured to use preprocessors, you need to include compiled CSS files in styleUrls, like this:

styleUrls: ['path/to/compiled/css/dashboard_admin.css']

Browsers can't read SCSS, SASS, LESS (and so on), just give compiled valid CSS file to them.

But if you want to use SASS for example, you need to configure Angular CLI when generating new project or you can do it for existing project.

Here is the good explanation: https://stackoverflow.com/a/41541042/6053654

P.S.
  • 15,970
  • 14
  • 62
  • 86
  • Thanks, I will check on this. How can I compile `CSS` to a folder? I am using Angular CLI. What config changes I have to make? – Vikram Jun 12 '17 at 06:44
  • @Vikram, it seems like you need to configure angular CLI when you generating new project. But if your project is already exists, you can do the following: https://stackoverflow.com/a/41541042/6053654 – P.S. Jun 12 '17 at 10:05
  • @Vikram, and please, upvote if my answer is useful for your case – P.S. Jun 12 '17 at 10:14
  • I have already done those changes in cli config file. Like set `styleExt` to `scss`> I guess, I have to make changes in webpack config. – Vikram Jun 12 '17 at 10:14
  • @Vikramm I don't have any experience with webpack, but can assume that you have to do it. May be this link will help: https://github.com/angular/angular-cli/issues/1647 – P.S. Jun 12 '17 at 10:17
  • Just added .angular-cli.json info for scss in question. – Vikram Jun 12 '17 at 10:19