CODEWITHSUNDEEP
angularangular-cli
Steve Hynding
Steve Hynding

Reputation: 1859

Angular 2 via CLI is not distributing SCSS files

I'm using the latest RC5 with the Angular 2 CLI. CSS works fine but switching to SCSS does not and result in the following console error:

zone.js:101GET http://localhost:4200/app/app.component.scss 404 (Not Found)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ VM68431:3XHRImpl.get @ xhr_impl.ts:48DirectiveNormalizer._fetch @ directive_normalizer.ts:45(anonymous function) @ directive_normalizer.ts:164DirectiveNormalizer._loadMissingExternalStylesheets @ directive_normalizer.ts:164DirectiveNormalizer.normalizeExternalStylesheets @ directive_normalizer.ts:143(anonymous function) @ directive_normalizer.ts:76ZoneDelegate.invoke @ zone.js:323Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426 zone.js:461 Unhandled Promise rejection: Failed to load http://localhost:4200/app/app.component.scss ; Zone: ; Task: Promise.then ; Value: Failed to load http://localhost:4200/app/app.component.scss

My angular-cli.js has the defaults set to:

"defaults": {
  "prefix": "app",
  "sourceDir": "src",
  "styleExt": "scss",
  "prefixInterfaces": false,
  "lazyRoutePrefix": "+"
}

And my app.component.js:

import { Component } from '@angular/core';
@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  constructor () {}
}

And, yes, app.component.scss exists in the same directory. The error appears to be due to the file not being copied over to /dist but as I understand, angular 2 turns the styles into domain wrapped entities injected via JS.

Upvotes: 1

Views: 452

Answers (1)

Steve Hynding
Steve Hynding

Reputation: 1859

After removing styleExt from the angular-cli.js and leaving the url as '.css' I just realized that it was, in fact, using the '.scss' file; thus, styles started appearing.

I had to remove styleExt, which I didn't expect.

I believe having manually installed node-sass solved a preliminary issue I had before posting this question.

Upvotes: 1

Related Questions