Yeoman is a toolchain for front-end development utilizing Grunt and Bower to scaffold, develop, and build webapps.
There are official generators maintained by the Yeoman team such as generator-angular for AngularJS and generator-backbone for Backbone.js.
Yeoman also supplies framework specific generators for Backbone and Angular
like yo backbone:model Foo. With Yeoman, you can spend more time writing code
and less time configuring out of the box.
In this post, we will create a basic Yeoman project, install Sass (without Compass) using Grunt, and set up Bourbon and Neat using Bower.
Creating a Yeoman Webapp project
Start by installing Yeoman.
npm install -g yo
Next, install a Yeoman generator. For this example, I’ll be using the Yeoman Webapp Generator:
npm install -g generator-webapp
Create a folder for your project (in this case: yeoman-example), change
directory to the folder, then run yo webapp:
mkdir yeoman-example
cd yeoman-example
yo webapp
The output should look similar to this:
Arrow down so that “Bootstrap” is deselected and “Sass” is selected. Press “Enter.”
Next, install Bourbon and Neat using Bower:
bower install --save bourbon
bower install --save neat
That’s it! Bower automatically adds the import statements to your stylesheet
and sets up your Gruntfile.js for you.
Installing grunt-contrib-sass
Make sure you have Sass installed. You can find out by running sass -v and if
it outputs a version number.
$ gem install sass
$ sass -v
Sass 3.4.6 (Selective Steve)
Next, install grunt-contrib-sass using the command:
npm install grunt-contrib-sass --save-dev
In the project’s app folder, create a new folder called sass. This is where
we will put our sass files. Move main.css to app/sass and change the
extension to .scss:
mkdir app/sass
mv app/styles/main.css app/sass/main.scss
Installing Bourbon and Neat using Bower
Install Bourbon and Neat using bower install --save:
bower install --save bourbon
bower install --save neat
This downloads and saves the Bourbon and Neat repositories in the
bower_components directory.
In main.scss, import bourbon and neat:
// In `app/sass/main.scss`
@import 'bourbon';
@import 'neat';
// Other imports and styles go here
Configuring Sass with Grunt
Next, we’ll need to configure our Gruntfile for compiling .scss files.
Open Gruntfile.js and update grunt.initConfig to configure what files to
compile with Sass.
We will also add an options hash with Bourbon and Neat’s stylesheets to the
Sass loadPath. By adding these to the loadPath, Sass will see Bourbon and
Neat’s stylesheets in bower_components/..when we use @import 'bourbon'; and
@import 'neat';:
grunt.initConfig({
// ...
sass: {
dist: {
files: [{
expand: true,
cwd: '<%= config.app %>/sass',
src: ['*.scss'],
dest: '<%= config.app %>/styles',
ext: '.css'
}],
options: {
loadPath: [
'bower_components/bourbon/dist',
'bower_components/neat/app/assets/stylesheets'
]
}
}
},
// ...
})
We also want the sass task to execute when we run grunt build. You can
achieve this by adding sass to the build task:
grunt.registerTask('build', [
'clean:dist',
'useminPrepare',
'sass',
// ...
]);
Setting up Auto Compile
When you run grunt serve, Grunt will start a server, watch files, and run
tasks based on what files are changed.
In Gruntfile.js, update the watch.styles hash in grunt.initConfig to compile
.scss files whenever they are changed:
grunt.initConfig({
// ...
watch: {
styles: {
files: ['<%= config.app %>/sass/{,*/}*.scss'],
tasks: ['sass', 'newer:copy:styles', 'autoprefixer']
}
// ...
},
// ...
})
Last, let’s have Grunt compile our Sass files when we first run grunt serve.
Add the sass task where the serve task is registered:
grunt.registerTask('serve', 'start the server and preview your app, --allow-remote for remote access', function (target) {
// ...
grunt.task.run([
'clean:server',
'wiredep',
'sass',
// ...
]);
});
Wrapping up
Your project is now ready to go with Sass, Bourbon, and Neat!
Understanding how to add and configure Sass with Yeoman allows you to use different generators without worrying if they come with the right options for Sass.
