## How do I install SASS with Mean.io?

Tags: css,sass,mean.io

### Problem :

I have a basic MEAN.io setup. What's confusing me is the package structure. I'd like to use .scss files and compile SASS into .css files in the final version, but I'm not 100% sure how this works, as I'm just trying to learn.

I've already read the documentation provided by the MEAN.io team, regarding how I can make css files 'global', but I still am not sure how to preprocess .scss files.

I haven't tried much, as I'm not really sure what to do. MEAN.io seems to use Gulp by default. I never received a prompt asking me if I prefered Gulp or Grunt (as is shown in MEAN.io's blog).

Any help or examples would be very helpful. I've looked on Google, but most of the stuff I found was MEAN.js stuff. :(

Thanks!

### Solution :

To process .scss files you can pretty much copy the less configuration.

1. Install gulp sass

npm install gulp-sass --save-dev

2. Update gulp/development.js

paths = { ... sass: [ 'packages/**/*.scss', '!packages/**/node_modules/**', '!packages/**/assets/**/lib/**'], ... };

3. Create a gulp task to run sass

gulp.task('sass', function() { return gulp.src(paths.sass) .pipe(plugins.sass().on('error', plugins.sass.logError)) .pipe(gulp.dest('./packages')); });

4. At this point you should be able to run gulp sass and it should work but in order for it to run and watch files when you run gulp see the next two steps.

5. Add gulp task to defaultTasks (you can remove less if you desire)

var defaultTasks = ['coffee','clean', 'less', 'sass', 'csslint', 'devServe', 'watch'];

gulp.task('watch', function () { ... gulp.watch(paths.sass, ['sass']); });