antd-theme-webpack-plugin | A webpack plugin for Dynamic theme generation for Ant Design
kandi X-RAY | antd-theme-webpack-plugin Summary
kandi X-RAY | antd-theme-webpack-plugin Summary
A webpack plugin for Dynamic theme generation for Ant Design
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
- Registers a new SWF service and registers it in the service .
- Register a service worker
- get list data
- Checks if a service is reloaded
- Fetch data via AJAX request
- Display a notification message .
- render date cell data
- Check response status
- Handle the response from the request
- Render a month number .
antd-theme-webpack-plugin Key Features
antd-theme-webpack-plugin Examples and Code Snippets
Community Discussions
Trending Discussions on antd-theme-webpack-plugin
QUESTION
We are building a White Label platform using React, GatsbyJs and Ant Design. We are stuck with Gatsby and Ant Design because we are migrating from an existing system and changing any of those would bring huge impact. Also, we must have a single deploy. Having a build for each White Label is not an option.
So, we need to be able to change style (mainly color) at runtime.
The problem is: Ant Design uses less variables to define it's themes and we're not able to change them at runtime, not even with less's modifyVars.
The thing is we MUST change less variables, and not global CSS or use other means
Ant Design derivates the main variables many times to get adjacent properties. So, for instance, if we define @primary-color as red, when we add a Button to the screen, Ant Design also defines it's border color, hover color, and many other details with different shades of red.
This means that, if we were to use other styling tool, we would need to generate those color derivations and replace every little property for every component. This would be chaos.
Scenario
We are using gatsby-plugin-antd and gatsby-plugin-less to load less and change vars at build time. Our gatsby-config.js looks like this:
...ANSWER
Answered 2021-Sep-16 at 18:24Ant Design team has just released - TODAY - a new alpha version that includes dynamic theming, using CSS Variables.
https://ant.design/docs/react/customize-theme-variable
It works fine, so far.
EDIT - Detailed solution
I removed gatsby-plugin-antd and gatsby-plugin-less from the project. Also removed the import of antd less file.
Instead, in my styles/index.tsx (which is imported in gatsby-browser.js), I'm importing the variables.min.css file:
QUESTION
I have to be able to change ant design variables at runtime (not via theme less files). I've found plenty of examples of this using customize-cra and react-app-rewire-less, but none seem to work with craco. I have to use craco because I'm also using tailwindcss in this project.
What I've tried:
- antd-theme-webpack-plugin: I have access to
window.less.modifyVars
, but it seems to do nothing (calling it throws no errors, but the antd colors don't change); - antd-theme-switcher: Very similar to the above,
window.less.modifyVars
seems to have no effect; - antd-theme: I could not figure out how to add the
AntdThemePlugin.loader
incraco.config.js
, and I'm not sure that is the problem, but I could not make it work.
This is the current state of my craco.config.js
:
ANSWER
Answered 2021-Mar-16 at 17:57As of today I got it working. The second solution (antd-theme-switcher) actually worked as intended. My error is that I was adding the antd default variables in my main less file, but for this to work I had to add the color.less file in my public folder (as the second step in antd-theme-switcher says), so that window.less.modifyVars
has a less file to work in.
This seem to be not the most performatic approach though, and I'm going to bail from using antd in my project as soon as I can, as there seems to be no optimal solution for changing variables at runtime with this specific setup.
QUESTION
I'm using create-react-app template with typescript. On my local pc, run build successfully, but when run in CI server, build failed.
- build error
./src/store/redux/info/index.ts Syntax error: Cannot read property 'name' of undefined (0:undefined)
But there is no 'name' property in file
info/index.ts
...ANSWER
Answered 2020-Mar-20 at 07:31It seems to be an issue with 'typescript-eslint'.
It could be resolved by updating Typescript version to 3.8.x - as pointed out by user Phoebus at an other question: https://stackoverflow.com/a/60734819/5758225
Github issue (and PR link in comments): https://github.com/typescript-eslint/typescript-eslint/issues/1746
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install antd-theme-webpack-plugin
npm install -D antd-theme-webpack-plugin
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page