Wow, our whole app went broken, completely! All the styles do not work anymore and we did it very statet of the art, now we don’t even know how to begin. We have a deployment in december and it seems like we won’t make it. Should we rollback to latest beta? The code below is not working:
// http://ionicframework.com/docs/v2/theming/
// Global CSS
// --------------------------------------------------
// Put CSS rules here that you want to apply globally.
//
// To declare rules for a specific mode, create a child rule
// for the .md, .ios, or .wp mode classes. The mode class is
// automatically applied to the <body> element in the app.
//
// App Shared Sass variables belong in app.variables.scss.
// TODO: This is test only
body {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 70px !important;
}
According to the description of the global.scss here is where we have to declare global changes in our app, but none of the changes are taking effect, not event with !important keyword!
Also please change the description, the app.variables.scss no longer exists!
The pages styles are imported automatically, but now you need to specify a selector for each page like this:
@Component({
selector: ‘page1’,
templateUrl: ‘page1.html’,
})
and them in the scss:
page1 {
//your styles
}
yes, I know, but that was not the question. see the thread completely. I want toi set global styles and it’s not working.
exemple:
body {
font-size: 100px;
}
ok, I faced the same problem, as an ugly workaround I placed the global styles in the app.component.ts template.
I found a solution.
At the bottom of my variables.scss file I added @import “global”;
I left the “@import “ionic.globals”;” at the top of the file. These seem to be different.
This seems to work fine
what if you want to use the $colors object in your global? It’s a circular reference. Means, we end up having to abstract the $colors to a separate file. Right?
Keep that in variables.scss. Those are still accessible globally
You can also just add your global css styles to the bottom of your variables.scss file. sloppy but works best it seems
oh boy, that is so sad. our app was working just fine, we have soooo much to fix…what a pain…
Sadly, this is an actual bug in rc0, but on the bright side it should be fixed in the next release: https://github.com/driftyco/ionic/issues/8307
The PR got rejected.
Global styles go in app/app.scss in RC3. Create the file if it does not exist.
See https://github.com/driftyco/ionic/issues/8307#issuecomment-250966864 for details.