Nocturnal Pumpkin Maelstrom

    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.

    Install

    npm i js-to-less-var-loader

    DownloadsWeekly Downloads

    8

    Version

    1.0.4

    License

    ISC

    Last publish

    Collaborators

    • tompascall