@rsuite/webpack-multiple-themes-compile
Version:
Overwrite webpack config to output multiple themes css.
114 lines (91 loc) • 5.09 kB
Markdown
# webpack multiple themes compile
[](https://travis-ci.org/rsuite/webpack-multiple-themes-compile)
[](https://coveralls.io/github/hiyangguo/webpack-mutiple-theme-bundle-css-demo?branch=master)
English | [中文版][readm-cn]
This library use to overwrite webpack config to output multiple themes in once compile.
> If you used webpack version lower than 3 , please use [webpack-multiple-themes-compile@1](https://github.com/rsuite/webpack-multiple-themes-compile/tree/v1).
## Install
```bash
npm i webpack-multiple-themes-compile webpack-merge
```
## Example
Origin `webpack.config.js`
```javascript
module.exports = {
output: {
path: outPutPath,
filename: '[name].js',
chunkFilename: '[name].js'
}
// There is another options.
};
```
Change the `webpack.config.js` file.
```diff
+ const merge = require('webpack-merge');
+ const multipleThemesCompile = require('webpack-multiple-themes-compile');
- module.exports = {
+ const webpackConfigs = {
output: {
path: outPutPath,
filename: '[name].js',
chunkFilename: '[name].js'
}
// There is another options.
};
+ module.exports = merge(
+ webpackConfigs,
+ multipleThemesCompile({
+ themesConfig: {
+ green: {
+ color: '#008000'
+ },
+ yellow: {
+ import: [
+ '~thirdpartylibrary/styles/yellow.less'
+ ],
+ color: '#ffff00'
+ }
+ },
+ lessContent: 'body{color:@color}'
+ })
+ );
```
Output directory tree.
```
.
├── theme-green.css
├── theme-yellow.css
└── themes.js
```
## API
```
/**
* @param configs
*/
multipleThemesCompile(configs);
```
## configs
| Property | Type`（Default）` | Description |
| -------------- | --------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| styleLoaders | Array `[{ loader: 'css-loader' }, { loader: 'less-loader' }]` | The loaders to compile less.Details in [webpack homepage](https://webpack.js.org/configuration/module/#rule-loader) |
| themesConfig\* | Object | Theme configuration. `key` for the file name of the generated css, `value` for the object .The object's key, the value is the name of the variable to be overwritten, and the value of the variable. |
| lessContent | String \| `(themeName:string,config:Object)=> String` `@import "../index";` | The content of cache less. |
| preHeader | String `// Generate by Script.` | The header of generate files. |
| cacheDir | String `./src/less/themes` | Cache Directory. |
| cwd | String `__dirname` | Relative output directory. |
| outputName | String `theme-[name].css` | Finally output pathname.Options similar to the same options in webpackOptions.output. |
## Notice
If you used [`html-webpack-plugin`](https://www.npmjs.com/package/html-webpack-plugin),maybe you need added this config:
```diff
new HtmlwebpackPlugin({
filename: 'index.html',
template: 'src/index.html',
inject: 'body',
// exclude themes.js
+ excludeChunks: Object.keys(themesConfig)
})
```
[readm-cn]: https://github.com/rsuite/webpack-multiple-themes-compile/blob/master/README_zh.md