{"id":22697950,"url":"https://github.com/gem-mine/webpack-css-themes-plugin","last_synced_at":"2025-04-13T04:50:43.082Z","repository":{"id":44240935,"uuid":"269275128","full_name":"gem-mine/webpack-css-themes-plugin","owner":"gem-mine","description":null,"archived":false,"fork":false,"pushed_at":"2023-12-22T06:49:52.000Z","size":1205,"stargazers_count":7,"open_issues_count":5,"forks_count":2,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-04-24T02:44:55.921Z","etag":null,"topics":["less","plugin","themes","webpack"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gem-mine.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-06-04T06:09:04.000Z","updated_at":"2024-06-21T14:14:52.215Z","dependencies_parsed_at":"2024-06-21T14:14:44.549Z","dependency_job_id":"b96b25fa-55ed-405a-a157-a4bf3d801216","html_url":"https://github.com/gem-mine/webpack-css-themes-plugin","commit_stats":{"total_commits":123,"total_committers":3,"mean_commits":41.0,"dds":0.5772357723577235,"last_synced_commit":"316c09f40777c9693457fb8dd49ddd01776ef5ea"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gem-mine%2Fwebpack-css-themes-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gem-mine%2Fwebpack-css-themes-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gem-mine%2Fwebpack-css-themes-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gem-mine%2Fwebpack-css-themes-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gem-mine","download_url":"https://codeload.github.com/gem-mine/webpack-css-themes-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248665755,"owners_count":21142123,"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","plugin","themes","webpack"],"created_at":"2024-12-10T05:16:13.468Z","updated_at":"2025-04-13T04:50:43.060Z","avatar_url":"https://github.com/gem-mine.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Webpack-css-themes-plugin\n\nEnglish / [简体中文](./README.zh-CN.md)\n\n# Intro\n\nCompile once and output multiple theme style sheets\n\n- Support webpack multiple entries\n- Support `sass`/`less`\n- Theme files can contain rules other than variables\n- Theme files can refer to other files, including file in `node_modules`\n- Build on demand, theme file will be injected into the style files used by project\n- Support asynchronous chunks\n- Support HMR\n\nThis project is inpired by [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin)\n\nThis should support [ant-design](https://ant.design/), [element-ui](https://element.eleme.io/), which provide source style code in dist packages\n\n# Comparison\n\nCompare with [Ant-Design's offical theme solution](https://ant.design/docs/react/customize-theme)\n\n1. Support output multi-theme css in one compile\n2. compile on demand, not fully compile css(`using Umi 3`)\n3. use webpack build chain to get full style post-process support like `post-css` and `minify`\n\n## Requirement\n\n- Webpack: \\^5.45.1\n- less-loader: \"\\^8.0.0\"\n- sass-loader: \"\\^12.0.0\"\n\n### Older version\n\nIf you're using `webpack@4`, try `webpack-css-themes-plugin@1.0.0`\n\n- Webpack: \\^4.4.0\n- less-loader: \"\\^6.0.0\"\n- sass-loader: \"\\^8.0.0\"\n\nIf you're using `webpack@3`, try [`webpack-css-themes-plugin-legacy`](https://www.npmjs.com/package/webpack-css-themes-plugin-legacy)\n\n## How to Use\n\n1. webpack config\n\n```js\n\nconst WebpackCSSThemesPlugin = require('webpack-css-themes-plugin')\n\nconst ExcludeAssetsPlugin = require('@ianwalter/exclude-assets-plugin')\n// html-webpack-plugin \u003c 4.X\n// const HtmlWebpackExcludeAssetsPlugin = require('html-webpack-exclude-assets-plugin');\n\nconst HtmlWebpackPlugin = require('html-webpack-plugin')\n\n// if you need to enable hmr for this plugin\nprocess.env.NODE_ENV = 'development'\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.less$/i,\n        use: [\n          'css-loader',\n          {\n            loader: 'less-loader',\n            options: {\n              lessOptions: {\n                javascriptEnabled: true\n              }\n            },\n          }\n        ],\n      },\n      {\n        test: /\\.css$/i,\n        use: 'css-loader'\n      }\n    ],\n  },\n  plugins: [\n    new WebpackCSSThemesPlugin({\n      themes: [{\n        name: 'default',\n        entryPath: path.resolve(__dirname, 'src/theme/index.less')\n      }]\n    }),\n    // exclude css inject\n    new HtmlWebpackPlugin({\n      excludeAssets: [/\\.css$/],\n      template: path.resolve(__dirname, './index.html'),\n    }),\n    new ExcludeAssetsPlugin()\n  ],\n}\n```\n\nNotice\n\n1. This plugin replaces `extract-text-plugin/mini-css-extract-plugin`, please do not use it together.\n2. If you use `html-webpack-plugin`, you need to filter out the CSS injection.\n\nGet more usage from [`test cases`](/test/unit/cases).\n\n2. use import on demand of your component framework\n\nTake antd for example, you must import styles as less format. A common mistake would be importing multiple copied of styles that some of them are css format to override the less styles.\n\nIf you import styles by specifying the style option of `babel-plugin-import`, change it from 'css' to true, which will import the less version of antd.\n\nIf you import styles from 'antd/dist/antd.css', change it to antd/dist/antd.less.\n\n3. Do not to reference `theme file` in the project, it will automatic inject to every less/sass file in your project\n\n4. load/switch built theme css file\n\nyou can use [webpack-theme-set](https://www.npmjs.com/package/webpack-theme-set)\n\n```js\nimport themeSetter from 'webpack-theme-set'\n// inital set Theme\nthemeSetter.setTheme('light', {\n  prefix: 'main-'\n}).then(() =\u003e {\n   ReactDOM.render(.....)\n})\n// switch Theme\nthemeSetter.setTheme('light')\n```\n\nor your can load it yourself. just insert/remove `style` DOM to make it work.\n\n## Options\n\n### themes\n\nType: `Array\u003ctheme\u003e`\n\n- theme.name(Type `string?`): name of your theme, required when using `less`/`sass` mix compile.\n- theme.entryPath(Type `string`): absolute path of your theme entry, pass in object with `less: {lessThemePath}` and `sass: {sassThemePath}` when using `less`/`sass` mix compile.\n- theme.distFilename(Type `string?`): output file name for your theme, default: `[name].css`.\n\n### pre-processor\n\nType: `string` | `Array`\n\n`less` or `sass`, default `less`.\n\npass in `['less', 'sass']` when using `less`/`sass` mix compile.\n\n### publicPath\n\nType: `String|Function`\n\nIt will be the `publicPath` of the project by default.\n\nWhen is a function, and the input parameters are:\n\n- resourcePath: absolute path of resourcePath\n- rootContext: webpack's resource Context\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgem-mine%2Fwebpack-css-themes-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgem-mine%2Fwebpack-css-themes-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgem-mine%2Fwebpack-css-themes-plugin/lists"}