Mixin like compass

is there a way to use mixin like compass with ionic2 or use compass with ionic2 ?

I just included Bourbon but I’m not sure about it, if it’s a best practice or not. Therefore I also started a subject about it, see Sass: Including mixing library (Compass, Bourbon, etc.)?

In case you are interested in “how to include Bourbon in a Ionic2 project”, I proceeded like following:

  1. Install Bourbon with npm

     sudo npm install --save bourbon
    
  2. Modify your gulpfile.js to include the stylesheets/scss files of Bourbon in your project aka overwrite the ‘sass’ task

     gulp.task('sass', function(){
         return buildSass({
             sassOptions: {
                 includePaths: [
                         'node_modules/ionic-angular',
                         'node_modules/ionicons/dist/scss',
                         'node_modules/bourbon/app/assets/stylesheets'
                         ]
                    }
               });
        });
    
  3. In your project’s scss file, include Bourbon

     @import "_bourbon.scss";
    

And that’s it, seems to work, I was able to code a gradient background for my buttons using the Bourbon’s mixin linear-gradient.

@brandyshea What’s the proper way to achieve this in the new rc0 without gulp?

@agustinhaller have a look at my very last post about cropperjs … the way to include any third party scss is the same (instead of gulp in RC.0):

2 Likes

Thank you, this solved my issue.

1 Like

I noticed the solution works fine the first time I run ionic serve:

[20:35:10]  sass started ...
[20:35:13]  sass finished in 3.04 s
[20:35:13]  build dev finished in 24.39 s
[20:35:13]  watch ready in 24.66 s
Running live reload server: http://localhost:35729
Watching: www/**/*, !www/lib/**/*
√ Running dev server:  http://localhost:8100

But then when I change some random scss file it throws:

ionic $ [20:38:21]  sass started ...
[20:38:22]  Sass Error: line: 26, column: 1
File to import not found or unreadable: _bourbon
Parent style sheet: /Users/agustinhaller/ion2-Test/src/app/app.scss

[20:38:22]  sass failed:  Sass compile error

It’s weird. It seems that the second time it runs the sass task it misses the references to the includePaths defined in the custom sass.config.js

Any idea what may be happening here?

npm install @ionic/app-scripts@latest fixed my issue

1 Like

Exactly, the last version of app-scripts fix the reload of third party scss libraries.
Nice to hear it worked out!

Could you please show how you integrated compass?
I guess the config file should be enough.

Thank you in advance