1. grunt-sass
Compile Sass to CSS using node-sass
grunt-sass
Package: grunt-sass
Created by: sindresorhus
Last modified: Sat, 08 Apr 2023 20:46:36 GMT
Version: 3.1.0
License: MIT
Downloads: 692,758
Repository: https://github.com/sindresorhus/grunt-sass

Install

npm install grunt-sass
yarn add grunt-sass

grunt-sass Build Status

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.

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code