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

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin