{"id":23084976,"url":"https://github.com/rsuite/webpack-multiple-themes-compile","last_synced_at":"2025-08-16T04:30:35.500Z","repository":{"id":34655509,"uuid":"155800662","full_name":"rsuite/webpack-multiple-themes-compile","owner":"rsuite","description":"Overwrite webpack config to output multiple themes css.","archived":false,"fork":false,"pushed_at":"2023-10-18T17:52:53.000Z","size":1107,"stargazers_count":16,"open_issues_count":10,"forks_count":4,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-10-30T00:00:15.698Z","etag":null,"topics":["less-loader","themes-css","webpack"],"latest_commit_sha":null,"homepage":"https://github.com/rsuite/rsuite/tree/master/examples/custom-multiple-themes","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rsuite.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2018-11-02T02:01:30.000Z","updated_at":"2023-08-26T11:35:00.000Z","dependencies_parsed_at":"2023-02-15T21:45:45.759Z","dependency_job_id":"c68e9beb-275b-4a2c-b543-41966cadd25f","html_url":"https://github.com/rsuite/webpack-multiple-themes-compile","commit_stats":{"total_commits":55,"total_committers":5,"mean_commits":11.0,"dds":0.4181818181818182,"last_synced_commit":"f1e37b1e50e5c305cab616dd506a80282a2fc677"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rsuite%2Fwebpack-multiple-themes-compile","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rsuite%2Fwebpack-multiple-themes-compile/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rsuite%2Fwebpack-multiple-themes-compile/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rsuite%2Fwebpack-multiple-themes-compile/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rsuite","download_url":"https://codeload.github.com/rsuite/webpack-multiple-themes-compile/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230002197,"owners_count":18157891,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["less-loader","themes-css","webpack"],"created_at":"2024-12-16T17:41:12.318Z","updated_at":"2024-12-16T17:41:13.062Z","avatar_url":"https://github.com/rsuite.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# webpack multiple themes compile\n\n[![Build Status](https://travis-ci.org/rsuite/webpack-multiple-themes-compile.svg?branch=master)](https://travis-ci.org/rsuite/webpack-multiple-themes-compile)\n[![Coverage Status](https://coveralls.io/repos/github/hiyangguo/webpack-mutiple-theme-bundle-css-demo/badge.svg?branch=master)](https://coveralls.io/github/hiyangguo/webpack-mutiple-theme-bundle-css-demo?branch=master)\n![Packagist](https://img.shields.io/packagist/l/doctrine/orm.svg)\n![webpack](https://img.shields.io/badge/webpack-%3E%3D5-green.svg)\n\nEnglish | [中文版][readm-cn]\n\nThis library use to overwrite webpack config to output multiple themes in once compile.\n\n\u003e 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).\n\n\u003e If you used Webpack 4, please use [webpack-multiple-themes-compile@2.x](https://github.com/rsuite/webpack-multiple-themes-compile/tree/v2).\n\n## Install\n\n```bash\nnpm i webpack-multiple-themes-compile webpack-merge\n```\n\n## Example\n\nOrigin `webpack.config.js`\n\n```javascript\nmodule.exports = {\n  output: {\n    path: outPutPath,\n    filename: '[name].js',\n    chunkFilename: '[name].js',\n  },\n  // There is another options.\n};\n```\n\nChange the `webpack.config.js` file.\n\n```diff\n+ const merge = require('webpack-merge');\n+ const multipleThemesCompile = require('webpack-multiple-themes-compile');\n- module.exports = {\n+ const webpackConfigs = {\n  output: {\n    path: outPutPath,\n    filename: '[name].js',\n    chunkFilename: '[name].js'\n  }\n  // There is another options.\n};\n\n+ module.exports = merge(\n+   webpackConfigs,\n+   multipleThemesCompile({\n+     themesConfig: {\n+       green: {\n+         color: '#008000'\n+       },\n+       yellow: {\n+         import: [\n+           '~thirdpartylibrary/styles/yellow.less'\n+         ],\n+         color: '#ffff00'\n+       }\n+     },\n+     lessContent: 'body{color:@color}'\n+   })\n+ );\n```\n\nOutput directory tree.\n\n```\n.\n├── theme-green.css\n├── theme-yellow.css\n└── themes.js\n```\n\n## API\n\n```\n/**\n * @param configs\n */\nmultipleThemesCompile(configs);\n```\n\n## configs\n\n| Property       | Type`（Default）`                                                           | Description                                                                                                                                                                                          |\n| -------------- | --------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| 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)                                                                                  |\n| 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. |\n| lessContent    | String \\| `(themeName:string,config:Object)=\u003e String` `@import \"../index\";` | The content of cache less.                                                                                                                                                                           |\n| preHeader      | String `// Generate by Script.`                                             | The header of generate files.                                                                                                                                                                        |\n| cacheDir       | String `./src/less/themes`                                                  | Cache Directory.                                                                                                                                                                                     |\n| cwd            | String `__dirname`                                                          | Relative output directory.                                                                                                                                                                           |\n| outputName     | String `theme-[name].css`                                                   | Finally output pathname.Options similar to the same options in webpackOptions.output.                                                                                                                |\n| publicPath     | String`../../`                                                              | publicPath configuration for mini-css-extract-plugin                                                                                                                                                 |\n\n## Notice\n\nIf you used [`html-webpack-plugin`](https://www.npmjs.com/package/html-webpack-plugin),maybe you need added this config:\n\n```diff\n new HtmlwebpackPlugin({\n   filename: 'index.html',\n   template: 'src/index.html',\n   inject: 'body',\n   // exclude themes.js\n+  excludeChunks: Object.keys(themesConfig)\n })\n```\n\n[readm-cn]: https://github.com/rsuite/webpack-multiple-themes-compile/blob/master/README_zh.md\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frsuite%2Fwebpack-multiple-themes-compile","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frsuite%2Fwebpack-multiple-themes-compile","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frsuite%2Fwebpack-multiple-themes-compile/lists"}