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

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 样式行为。

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

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

How can I let Angular2 child components access the parents SCSS styles?

components

encapsulation

angular