0

I have taken on an existing project from an other dev, and SCSS is being used, but the other dev used to compile the CSS files locally (not on server) using CodeKit apparently.

I have a source map available, so my question is.. how can I use this source map and use it to set a task to watch and compile the .SCSS to .CSS files automatically (I am guessing using Grunt?)

Here is the relevant part of the source map:

"sources": ["frontend.scss","../../../../../../Library/Ruby/Gems/1.8/gems/compass-core-1.0.0.alpha.19/stylesheets/compass/reset/_utilities.scss","../../../../../../Volumes/Datas/Sites/smashy/hashtag/hashtag/www/app/assets/scss/_bootstrapgrid.scss","../../../../../../Volumes/Datas/Sites/smashy/hashtag/hashtag/www/app/assets/libraries/font-awesome/_path.scss","../../../../../../Volumes/Datas/Sites/smashy/hashtag/hashtag/www/app/assets/libraries/font-awesome/_core.scss","../../../../../../Volumes/Datas/Sites/smashy/hashtag/hashtag/www/app/assets/libraries/font-awesome/_larger.scss","../../../../../../Volumes/Datas/Sites/smashy/hashtag/hashtag/www/app/assets/libraries/font-awesome/_fixed-width.scss","../../../../../../Volumes/Datas/Sites/smashy/hashtag/hashtag/www/app/assets/libraries/font-awesome/_list.scss","../../../../../../Volumes/Datas/Sites/smashy/hashtag/hashtag/www/app/assets/libraries/font-awesome/_variables.scss","../../../../../../Volumes/Datas/Sites/smashy/hashtag/hashtag/www/app/assets/libraries/font-awesome/_bordered-pulled.scss","../../../../../../Volumes/Datas/Sites/smashy/hashtag/hashtag/www/app/assets/libraries/font-awesome/_spinning.scss","../../../../../../Volumes/Datas/Sites/smashy/hashtag/hashtag/www/app/assets/libraries/font-awesome/_rotated-flipped.scss","../../../../../../Volumes/Datas/Sites/smashy/hashtag/hashtag/www/app/assets/libraries/font-awesome/_mixins.scss","../../../../../../Volumes/Datas/Sites/smashy/hashtag/hashtag/www/app/assets/libraries/font-awesome/_stacked.scss","../../../../../../Volumes/Datas/Sites/smashy/hashtag/hashtag/www/app/assets/libraries/font-awesome/_icons.scss","../../../../../../Library/Ruby/Gems/1.8/gems/compass-core-1.0.0.alpha.19/stylesheets/compass/_support.scss","../../../../../../Library/Ruby/Gems/1.8/gems/compass-core-1.0.0.alpha.19/stylesheets/compass/css3/_border-radius.scss","../../../../../../Library/Ruby/Gems/1.8/gems/compass-core-1.0.0.alpha.19/stylesheets/compass/utilities/general/_clearfix.scss","../../../../../../Library/Ruby/Gems/1.8/gems/compass-core-1.0.0.alpha.19/stylesheets/compass/utilities/general/_hacks.scss","../../../../../../Library/Ruby/Gems/1.8/gems/compass-core-1.0.0.alpha.19/stylesheets/compass/css3/_box-sizing.scss","../../../../../../Library/Ruby/Gems/1.8/gems/compass-core-1.0.0.alpha.19/stylesheets/compass/css3/_transition.scss","../../../../../../Library/Ruby/Gems/1.8/gems/compass-core-1.0.0.alpha.19/stylesheets/compass/css3/_opacity.scss","../../../../../../Library/Ruby/Gems/1.8/gems/compass-core-1.0.0.alpha.19/stylesheets/compass/css3/_transform.scss"],
"names": [],
"file": "frontend.css"
Georges Sabbagh
  • 21
  • 3

1 Answers1

0

As you mentioned, you need to check your sourcemap file to determine the original SCSS files.

Then you need to setup 2 grunt tasks (or you can use Gulp):

  • build task that compiles your sass files into frontend.css
  • watch task that watches your sass files and triggers the build task on change

There are lots of tutorials on the internet concerning this topic, for instance: http://ryanchristiani.com/getting-started-with-grunt-and-sass/

Make sure to edit the source files in both watch and sass tasks to reflect your actual files.

Jad Joubran
  • 2,511
  • 3
  • 31
  • 57
  • Thanks, I had that figured but I thought that the multiple sources needed to go inside the Gruntfile.js .. instead I found out that you just need to use @import statements inside the .scss files (which are already in place I guess) http://stackoverflow.com/questions/13025865/sass-compass-compile-all-css-file-to-one – Georges Sabbagh Feb 18 '15 at 21:49
  • okay true.. but don't forget that you need to have all the source files in the watch task.. or else it won't fire up for all the changes. Don't forget to upvote the answer. Let me know if anything's not clear – Jad Joubran Feb 18 '15 at 22:01