https://github.com/atroo/less-to-json-loader

convert a less variables file into a json object to make use of it in your application
https://github.com/atroo/less-to-json-loader

Last synced: about 1 month ago
JSON representation

convert a less variables file into a json object to make use of it in your application

• Host: GitHub
• URL: https://github.com/atroo/less-to-json-loader
• Owner: atroo
• Created: 2016-07-14T16:15:44.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-02-08T11:49:14.000Z (almost 8 years ago)
• Last Synced: 2024-10-01T14:59:15.728Z (about 2 months ago)
• Language: JavaScript
• Size: 6.84 KB
• Stars: 5
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# less-to-json-loader

Sometime there is a need to know some variables you've specified in your less files within the scope of your javascript as well.

Maintaining them both in two seperate files is a tedious task and getting them upfront via elements which are just injected into the DOM for this purpose does not seem as pure as one would wish for.

This loader comes to the rescue, assuming you are using the awesome [webpack](https://webpack.github.io/) as well.

## Usage

Install

```javascript

npm install less-to-json-loader

```

Because you most likely just need to load a few of those ressource files, the normal usecase is to override the default loader for your less files for this specific require call! Therefore be carefull to prepend the extra "!" to your require string!

dimensions.less

```css

@test: 20rem;

@test2: @test/2;

```

usage in the application

```javascript

var lessVars = require("!less-to-json-loader!./../../assets/styles/dimensions.less");

console.log(lessVars.test); //>20rem

console.log(lessVars.test2); //>10rem

```

Note: the loader does the math for you as expected.

If you need to pass in a folder to resolve imported less files from you can do so via a queryparam

```javascript

var lessVars = require("!less-to-json-loader!./../../assets/styles/dimensions.less?path=./test/data/sub");

```