I am usiing antd library in my application. According to the [documentation][1] [1]: https://ant.design/docs/react/customize-theme
i can customize the theme by changing the variables like:
modifyVars: { "primary-color": "#EB564F", "link-color": "#0DD078", "success-color": "#0DD078", "border-radius-base": "40px", }
I did something like this in my react application adding the file webpack.config.js
and the next code inside:
// webpack.config.js const antdRegex = /antd.+\.less$/; module.exports = { rules: [ { test: antdRegex, loader: [ "style-loader", "css-loader", { loader: "less-loader", options: { lessOptions: { modifyVars: { "primary-color": "#EB564F", "link-color": "#0DD078", "success-color": "#0DD078", "border-radius-base": "40px", }, javascriptEnabled: true, }, }, }, ], }] }
But the colors don't change. Why and how to solve it?
Please check antd documentation for installation if you doesn't want to eject your react application(created using CRA)..
https://ant.design/docs/react/use-with-create-react-app
This answer is for those who wants to install ANTD manually after ejecting create react app.
versions used:
React Installation Steps:
Create react app using yarn CRA command ( yarn create react-app my-app )
Eject react app ( yarn eject )
CRA doesn't have less in boilerplate code(At least until 4.0.3).. Since ANTD is in less, we do install it manually.(You can import antd css directly to skip this entire process...But antd css is not on demand, which will download styles for all components even though we don't use them)
versions used:
antd - 4.13.1
babel-plugin-import - 1.13.3 (For importing components on demand)
less- 4.0.0
less-loader - 7.3.0
less-vars-to-js - 1.3.0
Steps:
Install all packages using this command
yarn add antd@4.13.1 && yarn add babel-plugin-import@1.13.3 less@4.0.0 less-loader@7.3.0 less-vars-to-js@1.3.0 -D
Webpack config and setting theme
In package.json install antd plugin for babel
"plugins": [ [ "import", { "libraryName": "antd", "style": true } ] ]
Modify webpack.config.js (Modified in three places in this file)
// Ant Design Webpack Config
const lessToJs = require("less-vars-to-js");
const themeVariables = lessToJs( fs.readFileSync(path.join(__dirname, "./../src/antdTheme.less"), "utf8") );
const lessRegex = /.less$/;
const lessModuleRegex = /.module.less$/;
Add if else condition and add this code..check picture on how condition is written
loaders.push(
{
loader: require.resolve("resolve-url-loader"),
options: {
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
},
},
{
loader: require.resolve(preProcessor),
options: {
lessOptions: {
modifyVars: themeVariables,
javascriptEnabled: true,
},
},
}
);
Add this code for supporting less and less modules
// Ant Design config
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
},
"less-loader"
),
sideEffects: true,
},
// Adds support for CSS Modules, but using LESS
// using the extension .module.less
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
"less-loader"
),
},
After changing these files
For webpack.config.js
to take effect, you would have to eject from create-react-app
. There is a workaround which does not require ejecting your project.
less
globallymain.less
file and include antd.less
in itmain.less
to .css
and include THAT file in your appless
globally npm install -g less
main.less
file and include antd.less
in it then redeclare the default variables you want to override@import 'node_modules/antd/dist/antd.less';
@primary-color: #EB564F;
@link-color: #0DD078;
@success-color: #0DD078;
@border-radius-base: 40px;
main.less
to .css
and include THAT file in your app Run lessc "./src/styles/main.less" "./src/styles/css/antd.css" --js
from the root of your project then import this css file in your project.
Source: Customising Ant Design (antd) theme without using react eject or any unreliable packages
craco
in create-react-app
For webpack.config.js
to take effect, you would have to eject from create-react-app
. The craco
package solves this problem as described in the official guide .
craco
packges using npm npm install --save-dev @craco/craco craco-less
.css
imports to .less
/* src/App.js */
import './App.css' -> './App.less';
/* src/App.less */
@import '~antd/dist/antd.css' -> '~antd/dist/antd.less';
craco.config.js
in project root const CracoLessPlugin = require("craco-less");
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: {
"primary-color": "#EB564F",
"link-color": "#0DD078",
"success-color": "#0DD078",
"border-radius-base": "40px",
},
javascriptEnabled: true,
},
},
},
},
],
};
package.json
"scripts": {
"start": "craco start",
"build": "craco build"
"test": "craco test"
}
Works really well what @rezso.dev has said above - Without ejecting create-react-app.
Other variables that can be edited:
@primary-color: #1890ff; // primary color for all components
@link-color: #1890ff; // link color
@success-color: #52c41a; // success state color
@warning-color: #faad14; // warning state color
@error-color: #f5222d; // error state color
@font-size-base: 14px; // major text font size
@heading-color: rgba(0, 0, 0, 0.85); // heading text color
@text-color: rgba(0, 0, 0, 0.65); // major text color
@text-color-secondary: rgba(0, 0, 0, 0.45); // secondary text color
@disabled-color: rgba(0, 0, 0, 0.25); // disable state color
@border-radius-base: 2px; // major border radius
@border-color-base: #d9d9d9; // major border color
@box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05); // major shadow for layers
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.