You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+46-7Lines changed: 46 additions & 7 deletions
Original file line number
Diff line number
Diff line change
@@ -18,7 +18,7 @@ This loader is for that special case when you would like to import data from a j
18
18
19
19
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:
20
20
21
-
For sass-loader:
21
+
For sass-loader:
22
22
```js
23
23
{
24
24
rules: [
@@ -41,7 +41,7 @@ For sass-loader:
41
41
}
42
42
```
43
43
44
-
For less-loader:
44
+
For less-loader:
45
45
46
46
```js
47
47
{
@@ -80,7 +80,7 @@ module.exports = colors;
80
80
```
81
81
82
82
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:
**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.
94
94
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:
96
96
97
97
```js
98
98
$fancy-white: #FFFFFE;
@@ -105,11 +105,50 @@ $fancy-black: #000001;
105
105
106
106
#### Misc
107
107
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
+
```
109
148
110
149
#### Demo
111
150
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:
113
152
```sh
114
153
cd demo
115
154
npm i
@@ -119,6 +158,6 @@ The webpack dev server serves the app on `localhost:8030`. In the app we share d
119
158
120
159
#### Development
121
160
122
-
Run tests with `npm test` or `npm run test:watch`.
161
+
Run tests with `npm test` or `npm run test:watch`.
123
162
124
163
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