Angular 2 通过 CLI 不分发 SCSS 文件
Angular 2 via CLI is not distributing SCSS files
我在 Angular 2 CLI 中使用最新的 RC5。 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 未处理的 Promise 拒绝:加载失败 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 注入的域包装实体。
从 angular-cli.js 中删除 styleExt 并将 url 保留为 '.css' 之后,我才意识到它实际上是在使用'.scss'文件;因此,样式开始出现。
我不得不删除 styleExt,这出乎我的意料。
我相信手动安装 node-sass 解决了我在发布此问题之前遇到的初步问题。
我在 Angular 2 CLI 中使用最新的 RC5。 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 未处理的 Promise 拒绝:加载失败 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 注入的域包装实体。
从 angular-cli.js 中删除 styleExt 并将 url 保留为 '.css' 之后,我才意识到它实际上是在使用'.scss'文件;因此,样式开始出现。
我不得不删除 styleExt,这出乎我的意料。
我相信手动安装 node-sass 解决了我在发布此问题之前遇到的初步问题。