js-to-less-var-loader

1.0.4 • 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 Sass, too.

js-to-less-var-loader

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

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

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

Prerequisites

  • Nodejs >= 6.0
  • Less for css pre-processing
  • Webpack for module bundle
  • Install js-to-less-var-loader npm package into your project: npm i --save js-to-less-var-loader

Setting up Webpack config

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

{
  rules: [
    test: /\.less$/,
    use: [
      {
        loader: "style-loader"
      },
      {
        loader: "css-loader"
      },
      {
        loader: "less-loader"
      },
      {
        loader: "js-to-less-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 less file as variable (e.g. @fancy-white: #FFFFFE; /*...*/ background-color: @fancy-white). In this situation just require your module in the beginning of your less 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 less variable.

Misc

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

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.

Dependents (1)

Package Sidebar

Install

npm i js-to-less-var-loader

Weekly Downloads

19

Version

1.0.4

License

ISC

Last publish

Collaborators

  • tompascall