@rsuite/webpack-multiple-themes-compile
npm i @rsuite/webpack-multiple-themes-compile

@rsuite/webpack-multiple-themes-compile

Overwrite webpack config to output multiple themes css.

by rsuite

0.0.1 (see all)License:MITTypeScript:Not Found
npm i @rsuite/webpack-multiple-themes-compile
Readme

webpack multiple themes compile

Build Status Coverage Status Packagist webpack

English | 中文版

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.

If you used Webpack 4, please use webpack-multiple-themes-compile@2.x.

Install

npm i webpack-multiple-themes-compile webpack-merge

Example

Origin webpack.config.js

module.exports = {
  output: {
    path: outPutPath,
    filename: '[name].js',
    chunkFilename: '[name].js',
  },
  // There is another options.
};

Change the webpack.config.js file.

+ 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

PropertyType(Default)Description
styleLoadersArray [{ loader: 'css-loader' }, { loader: 'less-loader' }]The loaders to compile less.Details in webpack homepage
themesConfig*ObjectTheme 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.
lessContentString | (themeName:string,config:Object)=> String @import "../index";The content of cache less.
preHeaderString // Generate by Script.The header of generate files.
cacheDirString ./src/less/themesCache Directory.
cwdString __dirnameRelative output directory.
outputNameString theme-[name].cssFinally output pathname.Options similar to the same options in webpackOptions.output.
publicPathString../../publicPath configuration for mini-css-extract-plugin

Notice

If you used html-webpack-plugin,maybe you need added this config:

 new HtmlwebpackPlugin({
   filename: 'index.html',
   template: 'src/index.html',
   inject: 'body',
   // exclude themes.js
+  excludeChunks: Object.keys(themesConfig)
 })

Downloads/wk

4

GitHub Stars

17

LAST COMMIT

8mos ago

MAINTAINERS

6

CONTRIBUTORS

1

OPEN ISSUES

2

OPEN PRs

12
VersionTagPublished
0.0.1
latest
1yr ago
No alternatives found
No tutorials found
Add a tutorial