├── README.md
├── index.js
└── package.json


/README.md:
--------------------------------------------------------------------------------
 1 | # Important Note
 2 | 
 3 | You still can use toolbox-loader to customize your variables in React Toolbox but it is deprecated since from now on you can use sass-loader to import your variables file for each stylesheet. Check [react-toolbox](http://github.com/react-toolbox/react-toolbox) for more info
 4 | 
 5 | # React Toolbox Loader
 6 | 
 7 | A webpack loader to add custom theming variables to your React Toolbox Components build process. You can install it as an npm package:
 8 | 
 9 | ```
10 | npm install --save-dev toolbox-loader
11 | ```
12 | 
13 | ## The configuration file
14 | 
15 | You just need to create a config file holding the variables you want to modify for your build and tell webpack to include it in the building process. For example you can create a little `theme.scss` file in your project context folder:
16 | 
17 | ```scss
18 | $color-primary: $palette-indigo-500 !default;
19 | $color-primary-dark: $palette-indigo-700 !default;
20 | $color-accent: $palette-pink-a200 !default;
21 | $color-accent-dark: $palette-pink-700 !default;
22 | $color-primary-contrast: $color-dark-contrast !default;
23 | $color-accent-contrast: $color-dark-contrast !default;
24 | ```
25 | 
26 | ## Add the file to your css loader
27 | 
28 | In your webpack configuration you can add an option to webpack specifying the name of the configuration file. By default it's `theme.scss` so if you call it that way you just need to add the loader:
29 | 
30 | ```javascript
31 | module: {
32 |     loaders: [{
33 |         test: /(\.scss|\.css)$/,
34 |         loader: ExtractTextPlugin.extract('style', 'css!sass!toolbox')
35 |     }]
36 | },
37 | toolbox: {theme: 'theme.scss'},
38 | ....
39 | ```
40 | 
41 | With this configuration your SASS files will be loaded with the context provided by your configuration file.
42 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | var HEADING = '@import "~react-toolbox/lib/_colors"; \n $theme-building: true;';
 2 | var DEFAULT_NAME = 'theme.scss';
 3 | var path = require('path');
 4 | var fs = require('fs');
 5 | 
 6 | module.exports = function (source) {
 7 |   if (this.cacheable) this.cacheable();
 8 |   var callback  = this.async();
 9 |   var options   = this.options.toolbox || {};
10 |   var fromBuild = options.fromBuild || true;
11 |   var themeName = options.theme || DEFAULT_NAME;
12 |   var themePath = path.resolve(themeName);
13 | 
14 |   var themeExists = fs.existsSync(themePath);
15 |   if (!themeExists) {
16 |     // if themePath is not readable, fall back to default theme name
17 |     themePath = path.resolve(DEFAULT_NAME);
18 |   }
19 | 
20 |   var heading = HEADING;
21 | 
22 |   if (!fromBuild) {
23 |     heading = heading.replace('/lib', '');
24 |   }
25 | 
26 |   this.addDependency(themePath);
27 | 
28 |   fs.readFile(themePath, "utf-8", function(err, theme) {
29 |     if(err) return callback(err);
30 |     callback(null, heading + '\n' + theme + '\n' + source);
31 |   });
32 | };
33 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "toolbox-loader",
 3 |   "version": "0.0.3",
 4 |   "description": "A loader used to add SASS themes for React Toolbox",
 5 |   "main": "index.js",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "https://github.com/react-toolbox/toolbox-loader.git"
 9 |   },
10 |   "scripts": {
11 |     "test": "echo \"Error: no test specified\" && exit 1"
12 |   },
13 |   "peerDependencies": {
14 |     "sass-loader": "*",
15 |     "webpack": "*"
16 |   },
17 |   "author": "Javi Velasco <javier.velasco86@gmail.com> (http://javivelasco.com/)",
18 |   "license": "ISC"
19 | }
20 | 


--------------------------------------------------------------------------------