js-to-sass-var-loader

1.0.2 • Public • Published

Build Status Coverage Status

This project is not maintained any more. Please try the js-to-styles-var-loader, which is a more flexible loader, it handles Less, too.

js-to-sass-var-loader

A Webpack loader to share data for sass variables between javascript modules and sass files

This loader is for that special case when you would like to import data from a javascript module into a sass file. The sass loader complains, because importing js module is not a valid sass instruction.

The loader only handles the case when you want to inject sass variables into a sass file via a javascript module.

Prerequisites

  • Nodejs >= 4.0
  • sass for css pre-processing
  • Webpack for module bundle

Setting up Webpack config

Probably you use sass-loader with Webpack. The usage in this case is pretty simple: just put this loader before sass-loader in your webpack config:

{
  rules: [
    test: /\.sass$/,
    use: [
      {
        loader: "style-loader"
      },
      {
        loader: "css-loader"
      },
      {
        loader: "sass-loader"
      },
      {
        loader: "js-to-sass-var-loader"
      }
    ]
  ]
}

Usage

Let's assume we would like to store some variable data in a module like this:

// colors.js
 
const colors = {
  'fancy-white': '#FFFFFE',
  'fancy-black': '#000001'
};
 
module.exports = colors;

You can use this module in your favorite templates / frameworks etc., and you don't want to repeat yourself when using these colors in a sass file as variable (e.g. $fancy-white: #FFFFFE; /*...*/ background-color: $fancy-white). In this situation just require your module in the beginning of your sass module:

require('relative/path/to/colors.js');
 
// ...
.some-class {
  background-color: $fancy-white
}
// ...

The form of the required data is important: it must be an object with key/values pair, the key will be the name of the sass variable.

Misc

You can use other require form (require('relative/path/to/module').someProperty), too.

Demo

You can try the loader via a small fake app in the demo folder:

cd demo
npm i
npm run demo

The webpack dev server serves the app on localhost:8030. In the app we share data between js and sass modules.

Development

Run tests with npm test or npm run test:watch.

The transformer is developed with tdd, so if you would like to contribute, please, write your tests for your new functionality, and send pull request to integrate your changes.

Dependencies (0)

    Dev Dependencies (4)

    Package Sidebar

    Install

    npm i js-to-sass-var-loader

    Weekly Downloads

    40

    Version

    1.0.2

    License

    ISC

    Last publish

    Collaborators

    • tompascall