[RC0] global.css not working

Ionic Framework ionic-v3
1

Hello everybody,
I’m porting my project from beta11 to rc0.
In beta11 I used to have some global css configuration to change the toolbar color app-wide in ‘app.core.scss’ file:

.toolbar-background {
  background: map-get($colors, primary);
}

.toolbar-title {
  color: map-get($colors, light);
}

.bar-button-default {
  color: map-get($colors, light);
}

and it worked fine.
I tried to reproduce that behavior by copying those configurations in global.scss, but it seems that this file is not considered by the ionic build system.
The same behavior applies in the tabs app created by default with ‘ionic start projectname --v2…’ .
In ‘node_modules/@ionic/app-scripts/config/sass.config.js’ i noticed that for the key variableSassFiles only variable.scss is loaded.
I tried to load the file manually by adding ‘@import “global”;’ and it seems to get loaded but my configurations are overridden by ionic defaults in the compiled main.css.

How do you override the default theme in rc0?

Thanks

2

Same here. Looking the sass.config.js it seems that the scss file src folder is “.tmp”

directoryMaps: {
'{{TMP}}': '{{SRC}}'
}

but when I’ve a look at that folder, I didn’t found any scss…

3

Mmmmm maybe not the right way to solve that, but if you add following code at the end of variables.scss, your global file gonna be included

@import "global";

I guess it’s not the right way…if it is, means this line is missing too in the ionic2-app-base

https://github.com/driftyco/ionic2-app-base/blob/master/src/theme/variables.scss
2 Likes
4

Hi @reedrichards, thank you for answering!
As I wrote I already tried to import global.scss in the variables file but my css are overridden by the default theme. I guess that the variables.scss is compiled before the default ionic theme. since it appears on top of the main.css.
For now i solved it by creating a custom class for my app where i put my app-wide configurations, but I’ll have to reference it in my templates.

5

I read that someone created a app.component.scss and put his code inside that file instead of global.scss (if I understand correctly). Didn’t tried but maybe that is a way too?

1 Like
6

Maybe, I’ll try that tomorrow.
Thanks

7

I’ve the same problem, currently i used the workaround proposed by @reedrichards and it worked!

i’m waiting for a better solution, any pronunciation by the ionic team?

1 Like
8

Actually there is app.scss file created along with app.component.ts, just move the contents of global scss from beta to this file and it works.

9

I found @balasivagnanam’s answer correct! Indeed you can make edits to ./src/app/app.scss and this is essentially the replacement to app.core.scss.

4 Likes
10

Exactly, here is the closed issue about this: