compile-sass

A module to compile SASS on-the-fly and/or save it to CSS files

Usage no npm install needed!

<script type="module">
  import compileSass from 'https://cdn.skypack.dev/compile-sass';
</script>

README

compile-sass

Build Status

A module to compile SASS on-the-fly and/or save it to CSS files using node-sass

The goal of this project is twofold:

  1. To provide a library that can compile SASS files on page load when using NODE_ENV=development in order to reduce development time (on-the-fly)
  2. To enable compilation and saving of SASS files to CSS files on all other environments when, for example, the application starts or with an npm script

Table of Contents

Requirements

This module is tested with Node.js >= 10. It might work with Node.js <= 9, but is not tested.

Install

npm install --save compile-sass

Example Usage

The following are a couple of examples of how you can use it in a real-life application:

Usage

For on-the-fly compiling

TypeScript
import compileSass from 'compile-sass';
app.use('/css/:cssName', compileSass());
CommonJS

Pay attention to the compileSass.setup which differs from the TypeScript variation!

const compileSass = require('compile-sass');
app.use('/css/:cssName', compileSass.setup());

With options

TypeScript
import compileSass from 'compile-sass';

app.use('/css/:cssName', compileSass({
  sassFilePath: path.join(__dirname, 'public/scss/'),
  sassFileExt: 'sass',
  embedSrcMapInProd: true,
  resolveTildes: true,
  nodeSassOptions: {
    errLogToConsole: true,
    noCache: true,
    force: true
  }
}));
CommonJS

Pay attention to the compileSass.setup which differs from the TypeScript variation!

const compileSass = require('compile-sass');

app.use('/css/:cssName', compileSass.setup({
  sassFilePath: path.join(__dirname, 'public/scss/'),
  sassFileExt: 'sass',
  embedSrcMapInProd: true,
  resolveTildes: true,
  nodeSassOptions: {
    errLogToConsole: true,
    noCache: true,
    force: true
  }
}));

Options

  • sassFilePath (default: 'public/scss')
  • sassFileExt (default: 'scss')
  • embedSrcMapInProd (default: false)
  • resolveTildes (default: false)
  • nodeSassOptions (default: {})

For compiling and saving as static CSS files

import { compileSassAndSaveMultiple } from 'compile-sass'; // TypeScript
const { compileSassAndSaveMultiple } = require('compile-sass'); // CommonJS

await compileSassAndSaveMultiple({
    sassPath: path.join(__dirname, 'public/scss/'),
    cssPath: path.join(__dirname, 'public/css/'),
    files: ['libs.scss']
  });
}));

API

compileSass()

Returns the compiled SASS as a string.

import { compileSass } from 'compile-sass'; // TypeScript
const { compileSass } = require('compile-sass'); // CommonJS

const cssString = await compileSass();

compileSassAndSave()

Compiles the given SASS file and saves it in the given directory.

import { compileSassAndSave } from 'compile-sass'; // TypeScript
const { compileSassAndSave } = require('compile-sass'); // CommonJS

await compileSassAndSave('full/path/to/sass-file.scss', 'full/path/to/css/');

compileSassAndSaveMultiple()

Compiles multiple SASS files defined in the "files" option. They must all be located in the directory defined in the "sassPath" option. The CSS files will be saved in the directory defined in the "cssPath" option.

import { compileSassAndSaveMultiple } from 'compile-sass'; // TypeScript
const { compileSassAndSaveMultiple } = require('compile-sass'); // CommonJS

await compileSassAndSaveMultiple({
    sassPath: path.join(__dirname, 'public/scss/'),
    cssPath: path.join(__dirname, 'public/css/'),
    files: ['libs.scss']
  });
});

setupCleanupOnExit()

Deletes the passed directory when the app is exited. The idea is to pass the directory where your compiled CSS files are, so that they can be deleted when the app is exited and recompiled when the app starts.

import { setupCleanupOnExit } from 'compile-sass'; // TypeScript
const { setupCleanupOnExit } = require('compile-sass'); // CommonJS

process.on('SIGINT', () => {
  try {
    setupCleanupOnExit('full/path/to/css');
    process.exit(0);
  }
  catch(error) {
    process.exit(1);
  }
});

Release Notes

1.1.3

  • Security updates
  • Update TypeScript

1.1.2

  • Security updates

1.1.1

  • Security updates

1.1.0

  • Add a feature to resolve paths passed to @import that start with ~
  • Security updates
  • Fix a bug where the node-sass options passed during setup weren't always used

1.0.5

  • Fix a critical security vulnerability

1.0.4

  • Security updates
  • Update node-sass
  • Update hoek 5 to @hapi/hoek 9

1.0.3

  • Fix the broken 1.0.2 release

1.0.2

  • Security updates
  • Update node-sass

1.0.1

  • Optimize what is included when the package is published (no more test files!)
  • Fix a couple of broken links in the Readme
  • Include LICENSE

1.0.0

  • Complete re-write with TypeScript
  • Include typings for TypeScript
  • Include automated testing for better stability

0.1.4

  • Update dependencies to fix security vulnerabilities

0.1.3

  • Fix security vulnerabilities

0.1.2

  • Update node-sass

0.1.1

  • Add more documentation

0.1.0

  • Add the ability to pass options to node-sass
  • Add further documentation

Maintainer

This modules is maintained by Alex Seifert (Website, Github).