Angular-cli: Way to import sass mixins in the final sass file

Created on 9 Dec 2016  路  3Comments  路  Source: angular/angular-cli

Hi there. I got some issues when trying to import a sass mixins file into the final sass file (the one which get compiled). When I try to access that mixins in other sass components partials, I got the following error

./src/app/components/main-page/_main-page.component.scss
Module build failed: 
@include center('x');
No mixin named center

All sass files except the one that get compiled at the end start with "_"
This is the final styles.scss

@import "app/stylesheets/normalize/import-now";
@import "app/stylesheets/mixins"; // This is the mixins file
@import "app/stylesheets/partials"; // This is where I import all components partials

This is the file where I get the error, _main-page.component.scss

// @import '../../stylesheets/mixins'; 

#main-page {
    position: absolute;
    top: 0px;
    left: 300px;
    bottom: 0px;
    width: 600px;
    background-color: yellow;
    @include center('x');
}

The only way to make it working is to uncomment the first line in component partial and doing the same in any other file where I use the mixins.
Is it the normal way to proceed?

The app was entirely built with this version on angular-cli
angular-cli: 1.0.0-beta.16
node: 7.2.0
os: darwin x64

Most helpful comment

The component's scss styles are essentially isolated. Any mixins need to be imported per component.

All 3 comments

The component's scss styles are essentially isolated. Any mixins need to be imported per component.

It is as @clydin says 馃拑

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

Was this page helpful?
0 / 5 - 0 ratings