Skip to content

Commit fe1e3c6

Browse files
committed
Update README to include scoped/deep props
1 parent 53060f5 commit fe1e3c6

File tree

1 file changed

+46
-7
lines changed

1 file changed

+46
-7
lines changed

README.md

Lines changed: 46 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ This loader is for that special case when you would like to import data from a j
1818

1919
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:
2020

21-
For sass-loader:
21+
For sass-loader:
2222
```js
2323
{
2424
rules: [
@@ -41,7 +41,7 @@ For sass-loader:
4141
}
4242
```
4343

44-
For less-loader:
44+
For less-loader:
4545

4646
```js
4747
{
@@ -80,7 +80,7 @@ module.exports = colors;
8080
```
8181

8282
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:
83-
```js
83+
```sass
8484
require('relative/path/to/colors.js');
8585
8686
// ...
@@ -92,7 +92,7 @@ require('relative/path/to/colors.js');
9292

9393
**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.
9494

95-
The js-to-styles-var-loader transforms this sass file and provides it in the following form for the sass-loader:
95+
The js-to-styles-var-loader transforms this sass file and provides it in the following form for the sass-loader:
9696

9797
```js
9898
$fancy-white: #FFFFFE;
@@ -105,11 +105,50 @@ $fancy-black: #000001;
105105

106106
#### Misc
107107

108-
You can use other require forms (`require('relative/path/to/module').someProperty`), too.
108+
You can import from named exports and properties of those, although the value of these must still be a flat list:
109+
110+
```js
111+
// themes.js
112+
113+
module.exports = {
114+
themes: {
115+
blue_theme: {
116+
some_color: "#00f"
117+
},
118+
red_theme: {
119+
some_color: "#f00"
120+
}
121+
},
122+
default: {
123+
some_color: "#aaa"
124+
}
125+
};
126+
```
127+
128+
Variables definitions are inserted into your sass/less file in place of the `require()` statement, so you can override variables inside blocks:
129+
130+
```less
131+
132+
require("themes.js").default;
133+
134+
.someThing {
135+
color: @some_color;
136+
}
137+
138+
.theme-blue {
139+
require("themes.js").themes.blue_theme;
140+
141+
.someThing {
142+
color: @some_color;
143+
}
144+
}
145+
146+
147+
```
109148

110149
#### Demo
111150

112-
You can try the loader via a small fake app in the `demo` folder:
151+
You can try the loader via a small fake app in the `demo` folder:
113152
```sh
114153
cd demo
115154
npm i
@@ -119,6 +158,6 @@ The webpack dev server serves the app on `localhost:8030`. In the app we share d
119158

120159
#### Development
121160

122-
Run tests with `npm test` or `npm run test:watch`.
161+
Run tests with `npm test` or `npm run test:watch`.
123162

124163
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.

0 commit comments

Comments
 (0)