Grunt: Replacing ruby sass with node sass

Ruby Sass has been an obstacle in many contributors' experiences. It depends on users having ruby installed properly for development, as well as the ruby gem for sass to be installed. This presents a barrier to entry for contributors unfamiliar with ruby and how to fix their own issues when they can't run npm install due to ruby related issues. Furthermore, ruby sass has been officially deprecated, and will no longer receive feature updates.

At this point in time, it makes a lot of sense to begin migrating repositories off of ruby sass and to use a more stable approach such as Dart Sass or LibSass. There is a very popular repo specifically for grunt, which is grunt sass which allows us to choose which flavor of implementation we want.

This wiki article chooses the node-sass implementation, which is a wrapper for the libsass library.

Step 1: Remove grunt-contrib-sass

We need to remove grunt-contrib-sass from our package.json file. This package is no good for us anymore because it depends on ruby and and the gem for ruby sass to be globally installed, which often presents hurdles to contributors.

To remove the package, open up a terminal session and navigate to your repo. Once in the root of your repo, run the following command:

npm uninstall grunt-contrib-sass --save-dev

Step 2: Add grunt-sass

Since we removed the ruby-dependent grunt-contrib-sass package, we'll need to install a different package to replace it. The grunt-sass package is a popular choice for grunt users, and allows for us to choose either Dart Sass or LibSass via the node-sass package.

To install both grunt-sass and node-sass, run the following command with the --save-dev flag to persist this to our package.json file:

npm install grunt-sass node-sass --save-dev

Step 3: Revise Gruntfile

Revise Gruntfile to use node-sass style implementation. Instructions can be found here https://github.com/sindresorhus/grunt-sass#usage , however most changes involve the following code blocks.

Add a line in Gruntfile.js to require node-sass, usually inside the module.exports block:

module.exports = function(grunt) {
 
  
  	// Require node-sass.
 	var sass = require('node-sass');

Replace the line grunt.loadNpmTasks( 'grunt-contrib-sass' ); with grunt.loadNpmTasks( 'grunt-sass' );, usually found toward the end of the file.

Lastly, change the options in the sass task to match the new node-sass implementation.

• Add implementation: sass, to the options.
• The option name style must be replaced with outputStyle. Example:

style: 'expanded' should be written as outputStyle: 'expanded'

• The option name loadPath which uses a string as the value should be replaced by includePaths and use an array value. Example:

loadPath: 'bower_components/responsive-foundation/css-dev', would become includePaths: ['bower_components/responsive-foundation/css-dev']

• Remove the option bundleExec: true as its no longer applicable since we're not using ruby sass.

Step 4: Edit or Remove Gemfiles

If your Gemfile only has ruby sass specified in it, it may be deleted. If there's other gems in there, leave them alone and only remove the ruby sass gem.

Most repos might not have any other gems required, so usually these two files (Gemfile and Gemfile.lock) can be deleted.

Remove Gemfile references

Remove the following line from hooks/post-merge:

check_run Gemfile "bundle install"

A note about package.json and Gemfiles

If the Gemfiles are deleted, we can also change our package.json's postinstall script line to remove the bundler install portion, since there are no gems to install.

Conclusion

At this point, you can run npm audit fix to automatically fix known vulnerabilities in other packages before committing the new changes. And you can also commit the resulting package-lock.json file so other contributors will have a similar setup that shouldn't encounter errors.