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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
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