Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rsuite/webpack-multiple-themes-compile
Overwrite webpack config to output multiple themes css.
https://github.com/rsuite/webpack-multiple-themes-compile
less-loader themes-css webpack
Last synced: about 1 month ago
JSON representation
Overwrite webpack config to output multiple themes css.
- Host: GitHub
- URL: https://github.com/rsuite/webpack-multiple-themes-compile
- Owner: rsuite
- License: mit
- Created: 2018-11-02T02:01:30.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-10-18T17:52:53.000Z (over 1 year ago)
- Last Synced: 2024-10-30T00:00:15.698Z (3 months ago)
- Topics: less-loader, themes-css, webpack
- Language: JavaScript
- Homepage: https://github.com/rsuite/rsuite/tree/master/examples/custom-multiple-themes
- Size: 1.06 MB
- Stars: 16
- Watchers: 9
- Forks: 4
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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).
> If you used Webpack 4, please use [[email protected]](https://github.com/rsuite/webpack-multiple-themes-compile/tree/v2).
## 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. |
| publicPath | String`../../` | publicPath configuration for mini-css-extract-plugin |
## 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