Compass + Yeoman
October 2014
There’s an elegant method to connect Compass to Yeoman I couldn’t find in the web.
One line of code
So I just leave this here.
After generating your project with yo webapp go to Gruntfile.js to sass section. You’ll see something like that:
sass: { options: { sourcemap: true, loadPath: 'bower_components' }, dist: { files: [{ expand: true, cwd: '<%= config.app %>/styles', src: ['*.{scss,sass}'], dest: '.tmp/styles', ext: '.css' }] }, server: { files: [{ expand: true, cwd: '<%= config.app %>/styles', src: ['*.{scss,sass}'], dest: '.tmp/styles', ext: '.css' }] } }
Just add compass: ” to options section. That’s all! It’s the simplest method I’ve managed to found. Enjoy! Now, sass section will look like:
sass: { options: { compass: '', sourcemap: true, loadPath: 'bower_components' }, dist: { files: [{ expand: true, cwd: '<%= config.app %>/styles', src: ['*.{scss,sass}'], dest: '.tmp/styles', ext: '.css' }] }, server: { files: [{ expand: true, cwd: '<%= config.app %>/styles', src: ['*.{scss,sass}'], dest: '.tmp/styles', ext: '.css' }] } }
Now you can try to @import “compass”; and ensure that compass works correctly.
Leave a Reply