Styles that are modified in main.css aren't saved when app is relaunched

I want to change some of the styles in the main.css file in my app. If I make the changes I see those changes in the app, but when I relaunch the app, those changes aren’t there and I check my main.css file and they get defaulted to the original styles. How do I make my changes in my main.css file persistent upon relaunching ?

The main.css file is generated by bundling together and minifying all of the various styles you have defined for your application in your .scss files. The main.css file will be regenerated every time your application is built, so you can’t make changes there. If you want to add some global CSS styles, you should add the styles to the app.scss file.

3 Likes

Yes this worked perfectly! Thank you

Also, I feel like I’m talking to a celebrity. I’ve watched almost all your youtube videos and they’ve helped so much. Thank you for those videos and I hope you continue your amazing work :slight_smile:

1 Like

Even after adding every single Ionic sass variable to variables.scss and resetting sizes and units, I’m having to write too much css throughout my app to override main.css. For example, by default Ionic often use rems, and I’m purposely using ems only. Where are these rems coming from? I’m afraid they’re all defined in node_modules/ionic-angular/components and that if I make any changes there, I would lose the changes with the next Ionic update. Is there a better way than writing custom css in my app?