Как я могу позволить дочерним компонентам Angular2 получить доступ к родительским стилям SCSS?

Question

У меня есть app.module.ts который включает в себя частичный файл SCSS под названием _colors.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

Это редко связано с инкапсуляцией представления, это скорее тема нахал. Инкапсуляция представлений имитирует только стиль моделирования теневых блоков.

Поскольку записи в массиве styles представляют каждый новый файл, каждый файл sass должен импортировать _colors.scss сам по себе.