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

我有一个app.module.ts其中包含一个称为_colors.scss的部分SCSS文件。这个文件包含一个名为颜色，如：如何让Angular2子组件访问父母的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部分加载并在我的子组件中可用？

来源

2016-10-24 Phillip Berger

它与封装无关。组件的SCSS需要访问变量。变量不存在于CSS输出中。因此，包含变量的SCSS文件应该在每个使用变量的文件中导入。 – estus

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

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

来源

2016-10-24 19:21:10

这似乎是正确的，但它不能“解决”能够普遍包含样式的问题。 –

如果您需要整个应用程序的全局样式，那么您可以在index.html或类似文件中添加一个普通样式表。您的sass变量不能从其上下文中访问。 –

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

回答

相关问题