Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tompascall/js-to-styles-var-loader
Webpack loader for sharing data amongst (less || sass) && javascript modules
https://github.com/tompascall/js-to-styles-var-loader
Last synced: about 1 month ago
JSON representation
Webpack loader for sharing data amongst (less || sass) && javascript modules
- Host: GitHub
- URL: https://github.com/tompascall/js-to-styles-var-loader
- Owner: tompascall
- Created: 2017-04-02T16:36:00.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-03-01T11:49:41.000Z (almost 4 years ago)
- Last Synced: 2024-11-15T00:55:57.740Z (about 1 month ago)
- Language: JavaScript
- Size: 54.7 KB
- Stars: 30
- Watchers: 2
- Forks: 13
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
 [](https://coveralls.io/github/tompascall/js-to-styles-var-loader?branch=master)
## js-to-styles-var-loader
### A [Webpack](https://webpack.github.io/) loader to share variable data between javascript modules and sass or less files
This loader is for that special case when you would like to import data from a javascript module into a sass /less file. The [sass](https://github.com/webpack-contrib/sass-loader) / [less](http://lesscss.org/) loader complains, because importing js module is not a valid instruction.
##### The loader only handles the case when you want to inject variable data into a sass / less file via a javascript module.
#### Prerequisites
- Nodejs >= 4.0
- Webpack for module bundling
#### Setting up Webpack config
Probably you use [sass-loader](https://github.com/webpack-contrib/sass-loader) or [less-loader](https://github.com/webpack-contrib/less-loader) with Webpack. The usage in this case is pretty simple: just put the js-to-styles-var-loader before the sass-loader / less-loader in your webpack config:
For sass-loader:
```js
{
rules: [
test: /\.scss$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader"
},
{
loader: "sass-loader"
},
{
loader: "js-to-styles-var-loader"
}
]
]
}
```
For less-loader:
```js
{
rules: [
test: /\.less$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader"
},
{
loader: "less-loader"
},
{
loader: "js-to-styles-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 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:
```sass
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 variable.
The js-to-styles-var-loader transforms this sass file and provides it in the following form for the sass-loader:
```js
$fancy-white: #FFFFFE;
$fancy-black: #000001;
.some-class {
background-color: $fancy-white
}
```
#### Misc
You can import from named exports and properties of those, although the value of these must still be a flat list:
```js
// themes.js
module.exports = {
themes: {
blue_theme: {
some_color: "#00f"
},
red_theme: {
some_color: "#f00"
}
},
default: {
some_color: "#aaa"
}
};
```
Variables definitions are inserted into your sass/less file in place of the `require()` statement, so you can override variables inside blocks:
```less
require("themes.js").default;
.someThing {
color: @some_color;
}
.theme-blue {
require("themes.js").themes.blue_theme;
.someThing {
color: @some_color;
}
}
```
#### Demo
You can try the loader via a small fake app in the `demo` folder:
```sh
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, less 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.