generator-ionic
generator-ionic copied to clipboard
diegonetto
Customize SCSS
Hello, i was reading this article http://ionicframework.com/tutorials/customizing-ionic-with-sass/ about customizing ionic with sass but the generator include the css version of ionic styles.
How about including the ionic.scss into the styles of the app so we can customize the application? I can make a PR since i got this working for me using wiredep.
Interested?
I'm definitely interested in that. I'd like to be able to remove or customize parts of the ionic base that way.
@izifortune I was planning on adding this next to the generator. I am curious how you utilized wiredep for this task. I was testing a modification to the Gruntfile that used the copy task to accomplish this goal.
As always, PR's are most welcome :)
At the moment i'm stuck trying to run grunt wiredep on the end event. Seems it doesn't wan't to run. If you know how to run a grunt command the pr is ready. Otherwise i shall use wiredep inside yeoman for that job https://github.com/taptapship/wiredep/blob/master/readme.md
@izifortune Hi Fabrizio, I'm new with SCSS and Grunt, so I'm not quite sure what I'm doing. I have a few lines of code in main.scss to change the default colors, such as $light, $positive as demonstrated in http://learn.ionicframework.com/formulas/working-with-sass/ but the generator-ionic doesn't compile the main.scss into main.css. What is the correct way to change the default ionic styles? Thanks!
Hi @kuriakin-zeng, actually the PR isn't merged yet so that's why your changes on the scss doesn't reflects. If you are interested in this the ionic-cli got this feature out of the box now. ( you have to drop the generator though )
@izifortune Thanks for your prompt response. Interesting, because main.scss is included by default, so I thought the feature would have been included. Do you mean that I should generate the css first and then manually copy it to the www?
The problem is that the the generator doesn't import the ionic.scss but the css so you can't change the colors vars. Either you import the ionic.scss inside yours or start a new project with the ionic-cli ( instead of the generator ) and you get that part already done.
Do you mean doing something like this: @import "bower_components//ionic/scss/ionic";
Followed @asgeo1 and @jimthedev's advice:
- http://robferguson.org/2015/07/07/customising-ionic-with-sass/
I followed this great article but its still not working as expected..
Somewhere it is still injectig "bower_components/ionic/release/css/ionic.css" into my index.html. And other the other hand im getting generated css files in .temp/styles, but none of these gets copied to my www/styles folder, there is only a vendor.css file..
Any help is appreciated.
