CODEWITHSUNDEEP
angularcomponentsencapsulation
user1781710
user1781710

Reputation:

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

I have an app.module.ts which includes a partial SCSS file called _colors.scss. This file contained named colors like:

$white: #FFFFFF

and many more.

Here is the component:

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
  }
}

Inside ./app.component.imports.scss is @import "../style/app.scss"; which has @import "../style/global-vars/_colors.scss" inside of it.

When I load up another route I am getting a compilation error from Jetpack and in the browser console:

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)

After doing some reading on style encapsulation I would have thought by setting encapsulation: ViewEncapsulation.None this style would be available in all children components but that is not the case?

How can I get the _colors.scss partial to load and be available in my child components?

Upvotes: 1

Views: 790

Answers (1)

Stefan Negele
Stefan Negele

Reputation: 1112

This has rarely to do with the view encapsulation, it´s more a sass related topic. The view encapsulation only simulates the shadow doms styling behaviour.

Since the entries in the styles array represent a new file each, every sass file needs to import the _colors.scss on its own.

Upvotes: 1

Related Questions