add support for sass customization about generator-ionic HOT 27 CLOSED

+1

from generator-ionic.

You can do that now, as ionic's SCSS files are included in the bower package.

index.html:

<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<!-- HOW TO GET RID OF THIS NEXT LINE? BOWER ALWAYS INSERTS IT -->
<link rel="stylesheet" href="bower_components/ionic/release/css/ionic.css" />
<!-- endbower -->
<link rel="stylesheet" href="styles/ionic.css" />
<!-- endbuild -->

<!-- build:css({.tmp,app}) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->

styles/ionic.scss:

@import '_variables.scss';
@import '../bower_components/ionic/scss/ionic.scss';

styles/_variables.scss:

// ionic base colors
$light:     $paper-white;
$stable:    $off-white;
$positive:  $blue;
... etc

styles/main.scss:

/**
 * import variables and mixins, so we can use them below
 */
@import '_variables.scss';
@import '../bower_components/ionic/scss/_mixins.scss';

.cards-bg {
  background: $light;
}
... etc

The only part I'm not sure of is how to prevent bower/grunt from installing the bower_components/ionic/release/css/ionic.css reference into index.html. Because that file is referenced in ionic's package.json file, which causes bower to always insert it into index.html when you run the grunt serve command.

For now I just remove the entire section to prevent that from happening.

from generator-ionic.

OK, I worked it out how to make it not include the default ionic.css.

There is a grunt package that automatically installs the bower css files into index.html: https://github.com/stephenplusplus/grunt-bower-install

It has an exclude option which can be used to tell it to exclude a file.

So update your grunt file to exclude the default ionic.css:

// Automatically inject Bower components into the app
'bower-install': {
  app: {
    html: '<%= yeoman.app %>/index.html',
    ignorePath: '<%= yeoman.app %>/',
    exclude: ['bower_components/ionic/release/css/ionic.css']
  }
},

from generator-ionic.

Would be cool though if this generator could set all of this up.

If you choose the 'compass' option, then it should probably do all of this automatically.

from generator-ionic.

@asgeo1 Thanks for posting your results. Until custom ionic sass building is included in the generator, would it be worth putting these steps into the readme?

from generator-ionic.

In addition to @asgeo1's code, you may also need to set the following variable before importing ionic to get ionicons working properly:

$ionicons-font-path: "../bower_components/ionic/release/fonts/";

from generator-ionic.

@asgeo1 I guess I don't really understand what the fix is here. Given the default structure that is generated only includes main.sass in the app/styles directory, it seems like you would want to exclude "bower_components/ionic/release/css/ionic.css" as described, but then import ionic.scss into your main.sass after your overrides, but maybe this manual include:
<link rel="stylesheet" href="styles/ionic.css" />
is now necessary?

Or maybe the way the index file is generated has changed. I could totally be missing something there since this is my first attempt at doing this...

from generator-ionic.

@project707 You are correct that this can be done manually. You have to do it in exactly the correct order as you described, and you must exclude the css version of ionic from the bower-install grunt task. This must be done because otherwise you'll get both versions (css and scss) of ionic installed and bundled, and everything breaks. I've created this gist that shows the approximate format and includes the grunt task with the excluded CSS version of ionic.

from generator-ionic.

So this is something that was tested by generating a project from scratch? As far as I know, the only file in the app/styles/ directory by default is "main.sass" ("main.scss" did not exist when I generated mine)

from generator-ionic.

Jason,

Sorry for the confusion. I prefer the scss syntax to the sass syntax so I
modified my project to use .scss files. Out of the box this generator uses
sass so you can just substitute .scss in my example for .sass and it should
work exactly the same way. Main.sass is the only file currently created by
the generator. The others you would create manually.

On Friday, July 11, 2014, Jason Ware [email protected] wrote:

So this is something that was tested by generating a project from scratch?
As far as I know, the only file in the app/styles directory by default is
"main.sass" (main.scss did not exist when I generated mine)

—
Reply to this email directly or view it on GitHub
#38 (comment)
.

from generator-ionic.

Hi

I excluded the css version from the bower-install grunt task and added the import line in main.sass using sass syntax
@import ../bower_components/ionic/scss/ionic

However, now when I run grunt serve, it hangs (100% cpu) here
Running "autoprefixer:dist" (autoprefixer) task

I've tried this on a brand new project with the latest version and as soon I do the import it hangs..
Any ideas?

from generator-ionic.

@dalyc, any chance you can throw that up in a repo so I can take a look?

from generator-ionic.

Hi Jim

Thanks for taking the time to take a look..
I'm new to grunt / autoprefixer etc so I'm not sure how to debug myself.
I was able to workaround by removing autoprefixer from the serve (and compass) tasks.
Also it doesn't happen on any of the other tasks serve:dist, build etc

Anyway here is the repo - stock standard (yo ionic sidetabs) with the import in main.sass
https://github.com/dalyc/test-autoprefixer

from generator-ionic.

@dalyc I am seeing this on your project too. I have an older project that I am not seeing it on. Will try to find the difference in versions and check if it is an autoprefixer bug upstream.

from generator-ionic.

What OS are you using btw?

from generator-ionic.

@dalyc Found it. An unclosed comment in _platform.scss in ionic was the cause. You can remove line 81 of that file in the short term until my PR gets merged.

from generator-ionic.

Thanks Jim. Much appreciated mate. Sorry for the late replies. I've been
away. The OS (not that it matters now I guess) is Gentoo Linux. A very
minimal custom system that I'm always fiddling with :)
On 19 Jul 2014 13:24, "Jim Cummins" [email protected] wrote:

@dalyc Found it. An unclosed comment in _platform.scss in ionic was the
cause. You can remove line 81 of that file in the short term until my PR
gets merged.

—
Reply to this email directly or view it on GitHub.

from generator-ionic.

Cool. I think a fix has been merged into nightlies. Looks like it was not
OS specific but instead was a bug in the latest version of ionic.

from generator-ionic.

+1 for this being default functionality when setting up with compass. It makes it a lot easier to modify the existing styles within ionic or remove parts you don't need.

from generator-ionic.

Thanks for the info in this thread. My app was scaffolded with a /app/styles/main.sass. I had to declare the variable and import the dependencies like this:

$dark:                  red !default  //must go before the variables declaration
@import '../bower_components/ionic/scss/_variables'
@import '../bower_components/ionic/scss/ionic'

from generator-ionic.

It should be noted that ionic-cli version 1.1.9 (which is a completely separate project) now has some preliminary sass support. Please note however that it does not support compass and is using libsass and not ruby sass. It is described here: http://forum.ionicframework.com/t/watching-sass-files-from-ionic-serve-new-in-cli-v1-1-9/8139

from generator-ionic.

I'm sorry in advance for the rookie questions. I've been also reading how to customize ionic theme with sass variables, but using the generator. and I think this thread is a little outdated with respect to the current structure the generator builds... i can't find any bower_component folder, and the only reference to scss files are inside lib/ionic folder...
Besides this, I have this two questions:

• Should I override ionic variables in custom scss files inside app/styles folder ?
• How's the css compilation process triggered ? I can't find any watcher for any scss files in the gruntfile right now...

from generator-ionic.

@sonoman I recommend using the ionic cli tool instead of this generator. I think it's not as well supported honestly. http://ionicframework.com/getting-started/

from generator-ionic.

Has anyone migrated the application to use the Ionic CLI tool instead of generator-ionic?

from generator-ionic.

No. As far as I'm aware it would mean moving away from compass and the sass gem to use sass-node.

On Sat, Jan 24, 2015 at 5:31 PM, Denis C de Azevedo
[email protected] wrote:

Has anyone migrated the application to use the Ionic CLI tool instead of generator-ionic?

Reply to this email directly or view it on GitHub:
#38 (comment)

from generator-ionic.

Followed @asgeo1 and @jimthedev's advice:

• http://robferguson.org/2015/07/07/customising-ionic-with-sass/

from generator-ionic.

Nice @Robinyo 👍

from generator-ionic.