Ionic-framework: `global.scss` file from a newly created ionic2 app is not used to styling app

[msaelices]

Short description of the problem:

global.scss file from a newly created ionic2 app is not used to styling app

But in this file appears:

// Global CSS
// --------------------------------------------------
// Put CSS rules here that you want to apply globally.

What behavior are you expecting?

The SASS styles should be applied.

Run ionic info from terminal/cmd prompt: (paste output below)

Cordova CLI: 6.2.0
Gulp version:  CLI version 1.2.1
Gulp local:  
Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
OS: Distributor ID: Ubuntu Description: Ubuntu 15.10 
Node Version: v4.4.3

[cekrem]

I have the same issue! It started after copying a "home.scss" file from an earlier beta11 project (but _before_ @import'ing it?!). It does compile home.scss however, for some reason.

[davejlong]

I'm noticing the same thing. None of the rules in global.scss are compiled in build.css after building the app.

§ ionic info

Your system information:

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
ios-deploy version: 1.9.0
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v6.7.0
Xcode version: Xcode 8.0 Build version 8A218a

[mhartington]

Thanks for the heads up!
PR made to fix this.
https://github.com/driftyco/ionic-app-scripts/pull/41

[basvdijk]

Is there a quickfix/workaround so I do not have to wait for RC.1 to have my layout working again?

[vicrep]

@basvdijk Adding this at the end of _theme/variables.scss_ worked for me: @import "./global";

[Manduro]

My workaround is to move src/theme/global.scss to src/app/app.scss and it should be compiled.

[basvdijk]

@vicrep Thanks! I tried that as well, but it created a circular dependency since some of my components also use the variables.scss.

[basvdijk]

@Manduro Thanks this solved it for now :)

[perez-danilo]

@Manduro It works! Thnks

[ramonornela]

My workaround https://github.com/ramonornela/ionic_playground_rc0/blob/master/config/sass.config.js and https://github.com/ramonornela/ionic_playground_rc0/blob/master/package.json#L43

[joshgarwood]

Can someone from Ionic please update the changelog steps, and add the fact that global.scss is needed when migrating an existing project... Spent a lot of time trying to figure out where my site-wide styles should go :( Others seem to be confused as well. Thanks!

[jourdan-jobox]

@Manduro's suggestion works; but would much rather prefer Mike's PR to be released soon since that would be the real way to do it I would think :)

[adamdbradley]

@Manduro yes moving the theme/global.scss to app/app.scss is the preferred solution since that file will get picked up because app.component.ts is the root module. I've updated the app-base to reflect this: https://github.com/driftyco/ionic2-app-base/commit/6bce14a580878745a80032da0c90715cda047952

[srikanth748]

I started an app with sidemenu in Ionic2 RC . The folder structure is bit different from beta version.But the issue is I am unable to use theming feature .I decided to style pages individually but I am unable to implement the styling feature. can someone give an idea how to implement styling in RC version or how to use global feature from app.scss .Thnq

code ----html
<ion-list> <ion-item *ngFor=" let result of sitelists" (click)="goToSelectSite(result.site_id)"> <div class="siterecord"> <div class ="l_image"> <img src= "http://s3.amazonaws.com/{{result.logo}}" > </div> <div class = sitelist> <span class="sitename">{{result.site_name}}</span> <span class="sitesubdomain">{{result.site_subdomain}}</span> </div> </div> </ion-item> </ion-list>
and scss
.siterecord{float:left;width:100%;border: 1px solid #f1f1f1;border-radius:5px;padding:5px;margin:5px 5px 0 0;

.l_image{img{float:left;max-height:35px;} }
.sitelist{float:left;
padding-left:15px;
letter-spacing: 0.1em;
font-weight: 100;
font-size:0.8em;
.sitename{display:block; font-weight:400;color:#1995ad }
.sitesubdomain{display:block; font-weight:100;font-style:italic;color:#404040;;}
}
}

[lcoenen]

Same problem here. I deleted all the node_modules for archiving (it takes so much space -_-), I did a npm i to reinstall it and now I get this error. Probably a versioning mistake, I'll have a look

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.