Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tompascall/js-to-less-var-loader
Webpack loader for sharing data amongst less and javascript modules
https://github.com/tompascall/js-to-less-var-loader
build dry javascript less loader tool webpack
Last synced: 12 days ago
JSON representation
Webpack loader for sharing data amongst less and javascript modules
- Host: GitHub
- URL: https://github.com/tompascall/js-to-less-var-loader
- Owner: tompascall
- Created: 2017-03-22T12:43:51.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-04-04T21:58:49.000Z (over 7 years ago)
- Last Synced: 2024-11-29T20:19:52.106Z (28 days ago)
- Topics: build, dry, javascript, less, loader, tool, webpack
- Language: JavaScript
- Size: 23.4 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
 [](https://coveralls.io/github/tompascall/js-to-less-var-loader?branch=master)
### This project is *not maintained* any more. Please try the [js-to-styles-var-loader](https://github.com/tompascall/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](https://github.com/webpack-contrib/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](http://lesscss.org/) 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](https://github.com/webpack-contrib/less-loader) with Webpack. The usage in this case is pretty simple: just put this loader before less-loader in your webpack config:
```js
{
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:
```js
// 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:
```js
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.