Angular-cli: Imports in styles.scss are not accessible from *.component.scss

[donaldallen]

Please provide us with the following information:

1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
   Mac OSX (10.11)
2. Versions. Please run ng --version. If there's nothing outputted, please run
   in a Terminal: node --version and paste the result here:

angular-cli: 1.0.0-beta.11-webpack.9-4                                                                         
node: 6.4.0                                                                                                    
os: darwin x64                                                                                                 

1. Repro steps. Was this an app that wasn't created using the CLI? What change did you
   do on your code? etc.
   I'm using an import statement in styles.scss:
   @import '../node_modules/bourbon/app/assets/stylesheets/bourbon';

In app/dashboard/dashboard.component.scss, I'm calling display() and align-items() from Bourbon like so:

.site-header {
    @include display(flex);
    @include align-items(center);
    background-color:rgb(200,200,200);
    height:150px;
}

1. The log given by the failure. Normally this include a stack trace and some
   more information.

ERROR in ./src/app/app.component.scss                                                                          
Module build failed:                                                                                           
    @include display(flex);                                                                                    
            ^                                                                                                  
      No mixin named display                                                                                   

Backtrace:                                                                                                     
        stdin:2                                                                                                
      in /Users/donaldallen/Websites/Vagrant/project/src/app/app.component.scss (line 2, column 14)          
 @ ./src/app/app.component.ts 19:21-52                                                                         
 @ ./src/app/index.ts                                                                                          
 @ ./src/main.ts                                                                                               
 @ multi main                                                                                                  

ERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.scss                                   
Module build failed:                                                                                           
    background-color:rgb(50,50,50);ng                                                                          
                                  ^                                                                            
      Property "ng" must be followed by a ':'                                                                  
      in /Users/donaldallen/Websites/Vagrant/project/src/styles.scss (line 12, column 36)                    
 @ ./src/styles.scss 4:14-159                                                                                  
 @ multi styles                                                                                                

1. Mention any other details that might be useful.

It seems like the only way to get this to work is if I add the import statements to each *.component.scss file.

---

Thanks! We'll be in touch soon.

[leon]

Yes unfortunately each styleUrls are compiled separatly if I understood it correct.
So your out of luck with automagically getting access to variables and mixins.

What you can do is create a global "shared.scss" file which you import in your component.scss
That file only contains the mixins and the variables.

That way you only need to maintain the shared.scss file, and if any new variables show up they will automatically be available to all your components.

[donaldallen]

Great, thanks! That's what I was thinking I'd have to do. This'll do 👍

[angular-automatic-lock-bot[bot]]

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