README

DEPRECATION NOTICE: This package has been deprecated and is not maintained anymore. Use node-sass-json-importer instead, it allows for importing .js files as well

node-sass-js-importer

JavaScript object literal importer for node-sass. Allows @importing CommonJS modules (.js files) in Sass files parsed by node-sass.

This is a fork of the node-sass-json-importer repository, adjusted for usage with JavaScript files.

Usage

Note that this packages expects you to export JavaScript object literals from your imported files.

node-sass

This module hooks into node-sass's importer api.

var sass = require('node-sass');
var jsImporter = require('node-sass-js-importer');

// Example 1
sass.render({
  file: scss_filename,
  importer: jsImporter,
  [, options..]
}, function(err, result) { /*...*/ });

// Example 2
var result = sass.renderSync({
  data: scss_content
  importer: [jsImporter, someOtherImporter]
  [, options..]
});

node-sass command-line interface

To run this using node-sass CLI, point --importer to your installed JavaScript importer, for example:

./node_modules/.bin/node-sass --importer node_modules/node-sass-js-importer/dist/node-sass-js-importer.js --recursive ./src --output ./dist

Webpack / sass-loader

Webpack v1

import jsImporter from 'node-sass-js-importer';

// Webpack config
export default {
  module: {
    loaders: [{
      test: /\.scss$/,
      loaders: ["style", "css", "sass"]
    }],
  },
  // Apply the JavaScript importer via sass-loader's options.
  sassLoader: {
    importer: jsImporter
  }
};

Webpack v2 and upwards

import jsImporter from 'node-sass-js-importer';

// Webpack config
export default {
  module: {
    rules: [
      test: /\.scss$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            importLoaders: 1
          },
        },
        {
          loader: 'sass-loader',
          // Apply the JavaScript importer via sass-loader's options.
          options: {
            importer: jsImporter,
          },
        },
      ],
    ],
  },
};

Importing strings

Since JavaScript objects don't map directly to SASS's data types, a common source of confusion is how to handle strings. While SASS allows strings to be both quoted and unqouted, strings containing spaces, commas and/or other special characters have to be wrapped in quotes. In terms of JavaScript, this means the string has to be double quoted:

Incorrect

module.exports = {
  description: "A sentence with spaces."
}

Correct

module.exports = {
  description: "'A sentence with spaces.'"
}

See discussion here for more:

https://github.com/Updater/node-sass-json-importer/pull/5

Thanks to

This module is based on the node-sass-json-importer repository, they did all the work.

Usage no npm install needed!