Question

我有一个app.module.ts，其中包含一个名为_colors.scss的部分SCSS文件。此文件包含命名颜色，如：

$white: #FFFFFF

还有更多。

以下是组件：

import { Component, ViewEncapsulation } from '@angular/core';
import { ApiService } from './shared';

@Component({
  selector: 'my-app', // <my-app></my-app>
  templateUrl: './app.component.html',

  styles: [ require('./app.component.imports.scss')],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  url = 'https://github.com/preboot/angular2-webpack';

  constructor(private api: ApiService) {
    // Do something with api
  }
}

内部./app.component.imports.scss是@import "../style/app.scss";，其中包含@import "../style/global-vars/_colors.scss"。

当我加载另一个路由时，我从Jetpack和浏览器控制台收到编译错误：

VM3358:1 Uncaught Error: Module build failed: 
  color: $sharp-blue;
        ^
      Undefined variable: "$sharp-blue".
      in /Users/username/Local Repo/project/retail-ui/src/style/app.scss (line 35, column 10)

在对样式封装进行一些阅读之后，我会想到通过设置encapsulation: ViewEncapsulation.None这个样式将在所有子组件中可用，但事实并非如此？

如何让_colors.scss部分加载并在我的子组件中可用？

Answer 1

这与视图封装很少有关，它更像是一个与sass相关的主题。视图封装仅模拟阴影doms样式行为。

由于styles数组中的条目各自代表一个新文件，因此每个sass文件都需要自己导入_colors.scss。

如何让Angular2子组件访问父SCSS样式？

1 个答案: