Using mixin in Grunt wrapper

[Peter Marosi]

Hello here also ;) Sorry for disturbing not getting thru with the mixin stuff in grunt, here is an example where I want to use the freshly merged in mixin option:

example: {
           expand: true,
            cwd: '<%= yeoman.app %>/images/example/design/sprites-vector',
            src: ['**/*.svg'],
            dest: '<%= yeoman.app %>/',
            options: {
                mode: {
                    css: {
                        prefix: '%example-%s',
                        dest: 'styles/example',
                        sprite: '../../images/example/design/example-sprite.svg',
                        bust: false,
                        render: {
                            scss: {
                                dest: '_example-sprite.scss'
                            }
                        }
                    }
                }
            }
       }

I've tried to put on the mode level the hasMixin: true and mixinName: 'example-sprite' but without luck.

Searched for an example in the Grunt documention but without luck, also probably it's not clear for me, but should I define a completly new mode to use AKA "mymode" or I can modify existing forex "css" by this settings.

Again thanks for the fast work.

[Peter Marosi]

Sorry @jkphl
Do you have an idea, what's I'm missing here?

[Joschi Kuphal]

Sorry @PeterMK85, I'm totall overloaded right now (will have a very important meeting in 2 hours). I'll try to get back to you this afternoon.

[Joschi Kuphal]

You need to pass in a valid mode.<mode>.mixin option for the mixin to be created. Please see here for a parameter description. Your config should look something like this:

example: {
   expand: true,
    cwd: '<%= yeoman.app %>/images/example/design/sprites-vector',
    src: ['**/*.svg'],
    dest: '<%= yeoman.app %>/',
    options: {
        mode: {
            css: {

                mixin: 'my-sprite', // <-- This creates the `@mixin my-sprite { ... }`

                prefix: '%example-%s',
                dest: 'styles/example',
                sprite: '../../images/example/design/example-sprite.svg',
                bust: false,
                render: {
                    scss: {
                        dest: '_example-sprite.scss'
                    }
                }
            }
        }
    }
}

Please let me know if you succeed now.

Cheers,
Joschi