Ionic 2: Feature Suggestion

When using ionic in a project where we have our own build, it is difficult/impossible to make use of the variables and mixins declared in Ionic because the settings used for the styles are mixed in with the styles themselves.

Consider for example this project that shows how to use ionic with webpack directly: https://github.com/mirkonasato/ionic2-webpack2-starter/tree/master/src/app/pages

The page uses the standard ng2 method of using styles with components through styleUrls. This works, but if you want to do something in the home.page.scss style like style button to have a size of: $button-ios-small-height there is no way to include that variable from ionic.

You could try to include src/components/button/button.ios.scss but you will end up also bring in the styles that are defined in that file.

If all the sass settings you may want to reuse somewhere else were separated (ie. variables and mixins) then user projects could make use of them as needed.

So for example have a file like src/themes/ionic.ios.vars.scss that holds all the variables used for styling components for ios. Similarly separate all mixins.