Question

我正在使用最新的RC5和Angular 2 CLI。 CSS工作正常，但切换到SCSS不会导致以下控制台错误：

zone.js：101GET http://localhost:4200/app/app.component.scss 404（未找到）scheduleTask @ zone.js：101ZoneDelegate.scheduleTask @ zone.js：336Zone.scheduleMacroTask @ zone.js：273（匿名函数）@ zone.js： 122send @ VM68431：3XHRImpl.get @ xhr_impl.ts:48DirectiveNormalizer._fetch @ directive_normalizer.ts:45（匿名函数）@ directive_normalizer.ts：164DirectiveNormalizer._loadMissingExternalStylesheets @ directive_normalizer.ts：164DirectiveNormalizer.normalizeExternalStylesheets @ directive_normalizer.ts：143（匿名函数）@ directive_normalizer.ts:76ZoneDelegate.invoke @ zone.js:323Zone.run @ zone.js：216（匿名函数）@ zone.js：571ZoneDelegate.invokeTask @ zone.js：356Zone.runTask @ zone.js：256drainMicroTaskQueue @ zone.js：474ZoneTask.invoke @ zone.js：426 zone.js：461未处理的承诺拒绝：无法加载http://localhost:4200/app/app.component.scss;区域：;任务：Promise.then;值：无法加载http://localhost:4200/app/app.component.scss

我的angular-cli.js默认设置为：

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

我的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 () {}
}

而且，是的，app.component.scss存在于同一目录中。错误似乎是由于文件未被复制到/ dist，但据我所知，angular 2将样式转换为通过JS注入的域包装实体。

Answer 1

从angular-cli.js中删除styleExt并将url保留为“.css”后，我才意识到它实际上是使用'.scss'文件;因此，风格开始出现。

我不得不删除styleExt，这是我没想到的。

我相信手动安装node-sass解决了我在发布此问题之前的初步问题。

通过CLI的Angular 2不分发SCSS文件

1 个答案: