grunt-sass

What is grunt-sass?

The grunt-sass npm package is a Grunt plugin for compiling Sass to CSS using the node-sass library. It allows you to integrate Sass compilation into your Grunt build process, providing a streamlined way to manage your stylesheets.

What are grunt-sass's main functionalities?

Basic Sass Compilation

This feature allows you to compile a single Sass file (main.scss) into a CSS file (main.css). The configuration is set up in the Gruntfile.js, and the 'sass' task is registered as the default task.

{
  "grunt.initConfig": {
    "sass": {
      "dist": {
        "files": {
          "'main.css'": "'main.scss'"
        }
      }
    }
  },
  "grunt.loadNpmTasks": "'grunt-sass'",
  "grunt.registerTask": "'default', ['sass']"
}

Multiple File Compilation

This feature allows you to compile multiple Sass files from a directory (sass) into a corresponding directory (css). The 'expand' option is used to enable dynamic file mapping.

{
  "grunt.initConfig": {
    "sass": {
      "dist": {
        "files": [
          {
            "expand": true,
            "cwd": "'sass'",
            "src": ["'*.scss'"],
            "dest": "'css'",
            "ext": "'.css'"
          }
        ]
      }
    }
  },
  "grunt.loadNpmTasks": "'grunt-sass'",
  "grunt.registerTask": "'default', ['sass']"
}

Source Maps

This feature enables the generation of source maps for the compiled CSS, which helps in debugging by mapping the CSS back to the original Sass source.

{
  "grunt.initConfig": {
    "sass": {
      "dist": {
        "options": {
          "sourceMap": true
        },
        "files": {
          "'main.css'": "'main.scss'"
        }
      }
    }
  },
  "grunt.loadNpmTasks": "'grunt-sass'",
  "grunt.registerTask": "'default', ['sass']"
}

Other packages similar to grunt-sass

node-sass

node-sass is a library that provides binding for Node.js to LibSass, the C version of the popular stylesheet preprocessor, Sass. It is the underlying library used by grunt-sass for the actual compilation process. Unlike grunt-sass, node-sass is not a Grunt plugin and is used directly in Node.js scripts.

gulp-sass

gulp-sass is a Gulp plugin for compiling Sass to CSS. It serves a similar purpose to grunt-sass but is designed to work with Gulp, another popular task runner. Gulp's streaming build system offers a different approach compared to Grunt's configuration-based system.

sass-loader

sass-loader is a loader for webpack that compiles Sass to CSS. It integrates seamlessly with webpack's module bundling system, making it a good choice for projects that use webpack for their build process. It offers similar functionality to grunt-sass but is tailored for webpack users.

README

grunt-sass

Compile Sass to CSS using Dart Sass or Node Sass.

Before filing an issue with this repository, please consider:

• Asking support questions on Use Stack Overflow.

• Reporting issues with the output on the Dart Sass or LibSass issue trackers, depending which implementation you're using.

• Reporting installation issues on the Dart Sass or Node Sass issue trackers, depending on which implementation you're using.

Install

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

Usage

const sass = require('node-sass');

require('load-grunt-tasks')(grunt);

grunt.initConfig({
	sass: {
		options: {
			implementation: sass,
			sourceMap: true
		},
		dist: {
			files: {
				'main.css': 'main.scss'
			}
		}
	}
});

grunt.registerTask('default', ['sass']);

You can choose whether to use Dart Sass or Node Sass by passing the module to the implementation option. One implementation or the other must be passed.

Note that when using Dart Sass, synchronous compilation is twice as fast as asynchronous compilation by default, due to the overhead of asynchronous callbacks. To avoid this overhead, you can use the fibers package to call asynchronous importers from the synchronous code path. To enable this, pass the Fiber class to the fiber option:

const Fiber = require('fibers');
const sass = require('node-sass');

require('load-grunt-tasks')(grunt);

grunt.initConfig({
	sass: {
		options: {
			implementation: sass,
			fiber: Fiber,
			sourceMap: true
		},
		dist: {
			files: {
				'main.css': 'main.scss'
			}
		}
	}
});

grunt.registerTask('default', ['sass']);

Files starting with _ are ignored to match the expected Sass partial behaviour.

Options

See the Node Sass options, except for file, outFile, success, error.

The default value for the precision option is 10, so you don't have to change it when using Bootstrap.