{"id":23353678,"url":"https://github.com/intoli/antd-scss-theme-plugin","last_synced_at":"2025-04-05T05:04:24.737Z","repository":{"id":39673007,"uuid":"121216519","full_name":"intoli/antd-scss-theme-plugin","owner":"intoli","description":"A Webpack plugin for customizing Ant Design with an SCSS theme file and using Ant Design's compiled variables in SCSS files throughout your project. ","archived":false,"fork":false,"pushed_at":"2022-12-08T16:49:23.000Z","size":1726,"stargazers_count":201,"open_issues_count":68,"forks_count":82,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-04-26T00:25:36.177Z","etag":null,"topics":["antd","scss-theme","stylesheets","webpack-plugin","webpack-setup"],"latest_commit_sha":null,"homepage":"https://intoli.com/blog/antd-scss-theme-plugin/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/intoli.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-12T07:52:36.000Z","updated_at":"2023-07-11T06:22:02.000Z","dependencies_parsed_at":"2023-01-25T15:00:52.055Z","dependency_job_id":null,"html_url":"https://github.com/intoli/antd-scss-theme-plugin","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intoli%2Fantd-scss-theme-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intoli%2Fantd-scss-theme-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intoli%2Fantd-scss-theme-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intoli%2Fantd-scss-theme-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/intoli","download_url":"https://codeload.github.com/intoli/antd-scss-theme-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247289424,"owners_count":20914464,"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":["antd","scss-theme","stylesheets","webpack-plugin","webpack-setup"],"created_at":"2024-12-21T09:15:13.812Z","updated_at":"2025-04-05T05:04:24.705Z","avatar_url":"https://github.com/intoli.png","language":"JavaScript","readme":"\u003ch1 vertical-align=\"middle\"\u003eantd-scss-theme-plugin\n    \u003ca targe=\"_blank\" href=\"https://twitter.com/home?status=antd-scss-theme-plugin%20%E2%80%93%20A%20Webpack%20plugin%20for%20customizing%20Ant%20Design%20with%20an%20SCSS%20theme%20file.%0A%0Ahttps%3A%2F%2Fgithub.com%2Fprncc%2Fantd-scss-theme-plugin\"\u003e\n        \u003cimg height=\"26px\" src=\"https://simplesharebuttons.com/images/somacro/twitter.png\"\n            alt=\"Tweet\"\u003e\u003c/a\u003e\n    \u003ca target=\"_blank\" href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A//github.com/intoli/antd-scss-theme-plugin\"\u003e\n        \u003cimg height=\"26px\" src=\"https://simplesharebuttons.com/images/somacro/facebook.png\"\n            alt=\"Share on Facebook\"\u003e\u003c/a\u003e\n    \u003ca target=\"_blank\" href=\"http://reddit.com/submit?url=https%3A%2F%2Fgithub.com%2Fprncc%2Fantd-scss-theme-plugin\u0026title=antd-scss-theme-plugin%20%E2%80%93%20A%20Webpack%20plugin%20for%20customizing%20Ant%20Design%20with%20SCSS\"\u003e\n        \u003cimg height=\"26px\" src=\"https://simplesharebuttons.com/images/somacro/reddit.png\"\n            alt=\"Share on Reddit\"\u003e\u003c/a\u003e\n    \u003ca target=\"_blank\" href=\"https://news.ycombinator.com/submitlink?u=https://github.com/intoli/antd-scss-theme-plugin\u0026t=antd-scss-theme-plugin%20%E2%80%93%20A%20Webpack%20plugin%20for%20customizing%20Ant%20Design%20with%20SCSS\"\u003e\n        \u003cimg height=\"26px\" src=\"resources/y-combinator.png\"\n            alt=\"Share on Hacker News\"\u003e\u003c/a\u003e\n\u003c/h1\u003e\n\n\u003cp align=\"left\"\u003e\n    \u003ca href=\"https://circleci.com/gh/intoli/antd-scss-theme-plugin/tree/master\"\u003e\n        \u003cimg src=\"https://img.shields.io/circleci/project/github/intoli/antd-scss-theme-plugin/master.svg\"\n            alt=\"Build Status\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/intoli/antd-scss-theme-plugin/blob/master/LICENSE.md\"\u003e\n        \u003cimg src=\"https://img.shields.io/npm/l/antd-scss-theme-plugin.svg\"\n            alt=\"License\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/antd-scss-theme-plugin\"\u003e\n        \u003cimg src=\"https://img.shields.io/npm/v/antd-scss-theme-plugin.svg\"\n            alt=\"NPM Version\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n`antd-scss-theme-plugin` is a [Webpack plugin](https://webpack.js.org/concepts/plugins/) which allows you to effectively use [Ant Design](https://ant.design/) in a project with SCSS styling.\nWith it you can:\n\n1. Customize Ant Design by specifying theme variable overrides through a single `theme.scss` file.\n2. `@import` Ant Design's [theme](https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less) and [color](https://github.com/ant-design/ant-design/blob/master/components/style/color/colors.less) variables from your `theme.scss` file.\n3. Hot reload your project when `theme.scss` changes.\n\n:book: For a more detailed overview of the plugin and its usage, check out the [Using Ant Design in Sass-Styled Projects](https://intoli.com/blog/antd-scss-theme-plugin/) article on [Intoli's blog](https://intoli.com/blog/).\n\n\n### Table of Contents\n\n- [Installation](#installation) - Instructions about installing this Webpack plugin from `npm`.\n- [Configuration](#configuration)\n    - [Step 1. Configure Ant Design to Use Less Stylesheets](#step-1-configure-ant-design-to-use-less-stylesheets) - Instructions for configuring `antd` to use Less instead of pre-compiled CSS.\n    - [Step 2. Use `antd-scss-theme-plugin` in Your Webpack Setup](#step-2-use-antd-scss-theme-plugin-in-your-webpack-setup) - Instructions for enabling this plugin.\n- [Usage](#usage)\n    - [Customize Ant Design's Theme](#customize-ant-designs-theme) - How to specify theme variable overrides in SCSS.\n    - [Use Ant Design's Customized Color and Theme Variables](#use-ant-designs-customized-color-and-theme-variables) - How to import (customized) theme variables in SCSS files throughout your project.\n    - [Live Reload Components when Ant Design Styles Change](#live-reload-components-when-ant-design-styles-change) - A reminder that hot-reloading works with this plugin.\n\n\n\n## Installation\n\nThis plugin is published as [antd-scss-theme-plugin](https://www.npmjs.com/package/antd-scss-theme-plugin) on `npm`:\n\n```bash\nnpm install --save-dev antd-scss-theme-plugin\n```\n\nIt extends the functionality of a `antd`, `less-loader` and `sass-loader` to accomplish its goals.\nThese are listed as `peerDependencies` in [package.json](package.json), and you can install them with:\n\n```\nnpm install --save antd\nnpm install --save-dev less-loader sass-loader\n```\n\n\n## Configuration\n\nTo use `antd-scss-theme-plugin`, you need to configure Ant Design to use Less stylesheets when loading components, and to connect a few loaders with the plugin in your Webpack setup.\nYou can find a fully configured project in the [example](example/) directory.\n\n\n### Step 1. Configure Ant Design to Use Less Stylesheets\n\nIn order to customize Ant Design's theme, you need to configure `antd` to load its components with Less stylesheets instead of with pre-compiled CSS.\nThe [official documentation](https://ant.design/docs/react/customize-theme) explains this to some degree, but here are the explicit steps you should take.\n\n1. Install [babel-plugin-import](https://www.npmjs.com/package/babel-plugin-import), a package published by the makers of `antd`.\n2. Modify the plugin section of your Babel setup to use this package with `antd`:\n\n    ```json\n    \"plugins\": [\n      [\"import\", {\n        \"libraryName\": \"antd\",\n        \"style\": true\n      }]\n    ]\n    ```\n\n    The `\"style\": true` option is what enables the use of Less components.\n3. Configure `less-loader` to compile `antd` components.\n    This can be done by adding something like the following to your Webpack config's `loaders` array:\n\n    ```javascript\n    {\n      test: /\\.less$/,\n      use: [\n        {\n          loader: 'style-loader',\n          options: {\n            sourceMap: process.env.NODE_ENV !== 'production',\n          },\n        },\n        {\n          loader: 'css-loader',\n          options: {\n            importLoaders: 1,\n            sourceMap: process.env.NODE_ENV !== 'production',\n          },\n        },\n        'less-loader',\n      ],\n    }\n    ```\n\n    Obviously, this also requires you to install `style-loader` and `css-loader`.\n\nWith that setup, you can import self-contained `antd` components with lines like following:\n\n```javascript\nimport { Button } from 'antd';\n```\n\nSo, in addition to enabling styling customizations, this has the potential to reduce the size of your Webpack bundle.\n\n\n### Step 2. Use `antd-scss-theme-plugin` in Your Webpack Setup\n\nFirst, initialize the plugin by passing your theme file's path to the plugin's constructor, and add the plugin to your Webpack config's `plugins` array:\n\n```javascript\nimport AntdScssThemePlugin from 'antd-scss-theme-plugin';\n\nconst webpackConfig =  {\n  // ...\n  plugins: [\n    new AntdScssThemePlugin('./theme.scss'),\n  ],\n};\n```\n\nSecond, wrap your `less-loader` and `sass-loader` Webpack configs with `AntdScssThemeFile.themify()`.\nFor example, in the config from Step 1, you would change the line\n\n```javascript\n'less-loader',\n```\n\nto\n\n```javascript\nAntdScssThemePlugin.themify('less-loader'),\n```\n\nThis works even when your loader has options, e.g., you would change\n\n```javascript\n{\n  loader: 'sass-loader',\n  options: {\n    sourceMap: process.env.NODE_ENV !== 'production',\n  },\n}\n```\n\nto\n\n```javascript\nAntdScssThemePlugin.themify({\n  loader: 'sass-loader',\n  options: {\n    sourceMap: process.env.NODE_ENV !== 'production',\n  },\n})\n```\n\n\n## Usage\n\n### Customize Ant Design's Theme\n\nWith the project configured, you can customize Ant Design's theme by specifying [Ant Design theme variables](https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less) in your SCSS theme file (e.g., `theme.scss`).\nFor example, if `theme.scss` has the following contents\n\n```scss\n/* theme.scss */\n$primary-color: #fe8019;\n```\n\nthen the interface will no longer be based off of the default blue `#1890ff`, but rather a louder orange `#fe8019`:\n\n![Effects of Changing Primary Color to #fe8019](https://raw.githubusercontent.com/intoli/antd-scss-theme-plugin/master/resources/blue-orange-comparison.png)\n\nYou can customize any Less variable that `antd` uses in this way: just relace `@` with a `$`, e.g., `@info-color` becomes `$info-color`.\n\n\n### Use Ant Design's Customized Color and Theme Variables\n\nImporting `theme.scss` in some SCSS file gives it access all of Ant Design's [theme](https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less) and [color](https://github.com/ant-design/ant-design/blob/master/components/style/color/colors.less) variables.\nThis is true even if you specify only a subset of the available theme variables in `theme.scss`.\nFor instance, with `theme.scss` containing only a `$primary-color` definition as above, you would still be able to do something like:\n\n```scss\n@import '../theme.scss';\n\n.header {\n  color: $blue-10; /* From colors.less */\n  padding: $padding-lg; /* From themes/default.less */\n}\n```\n\n\n### Live Reload Components when Ant Design Styles Change\n\nSince `antd-scss-theme-plugin` registers your theme file as a watched dependency with Webpack, changes in the theme file will result in recompilations of components that use it.\nTo learn how to set up your project to use live reloading, see the working [example](example/).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fintoli%2Fantd-scss-theme-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fintoli%2Fantd-scss-theme-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fintoli%2Fantd-scss-theme-plugin/lists"}