Comments (22)
in base.less
.main {
width: 100%;
height: 100%;
min-height: 100%;
transition: 0.3s;
&.wide {
max-width: 1200px;
margin: 0 auto;
}
}
change to
{
.antd-pro-base-main {
width: 100%;
height: 100%;
min-height: 100%;
transition: 0.3s;
&.antd-pro-base-wide {
max-width: 1200px;
margin: 0 auto;
}
}
}
from antd-theme-webpack-plugin.
@chenshuai2144 I ran your code locally so can you specifically tell me what is the issue. Which component do you expect to change color but it's not changing.
Few things to clear,
In order to use this plugin, all less files should be imported in main less file like this and you need to specify which colors you want to update. Currently you are updating only @primary-color
@import './components/ActiveChart/index.less';
@import './components/Charts/ChartCard/index.less';
@import './components/Charts/Field/index.less';
@import './components/Charts/MiniProgress/index.less';
@import './components/Charts/Pie/index.less';
@import './components/Charts/Radar/index.less';
...
...
Have a look at this diff https://github.com/ant-design/ant-design-pro/compare/v2...mzohaibqc:theme?expand=1
from antd-theme-webpack-plugin.
getLocalIdent: (context, localIdentName, localName) => {
if (context.resourcePath.includes('node_modules')) {
return localName;
}
let antdProPath = context.resourcePath.match(/src(.*)/)[1].replace('.less', '');
if (context.resourcePath.includes('components')) {
antdProPath = antdProPath.replace('components/', '');
}
const arr = antdProPath
.split('/')
.map(a => a.replace(/([A-Z])/g, '-$1'))
.map(a => a.toLowerCase());
return `antd-pro${arr.join('-')}-${localName}`.replace('--', '-');
},
from antd-theme-webpack-plugin.
@chenshuai2144 Sure, I will reach you around 11pm GMT + 5. (Pakistan time)
from antd-theme-webpack-plugin.
@chenshuai2144 Are you using antd-tools
for build process or simple webpack?
from antd-theme-webpack-plugin.
Can you push your local changes for theming to remote branch so I can clone them and see what's wrong
from antd-theme-webpack-plugin.
I use roadhog and I think it may be because css-module.
you can see my code in the v2 branch
from antd-theme-webpack-plugin.
Is this a good method for components that need to be released separately?
from antd-theme-webpack-plugin.
@chenshuai2144 Do you have a google account so we can communicate on Hangout or chat?
from antd-theme-webpack-plugin.
from antd-theme-webpack-plugin.
I solved this problem, but css-moudle made me feel
from antd-theme-webpack-plugin.
@chenshuai2144 Can you share your findings and solution with me.
from antd-theme-webpack-plugin.
I want to add a tool that handles css-moudle.
what should I do?
from antd-theme-webpack-plugin.
@chenshuai2144 Which tool and how it will affect? I am at leave and don't have my laptop with me so I'll look into this after June 20.
from antd-theme-webpack-plugin.
look this ant-design/ant-design-pro#1662
from antd-theme-webpack-plugin.
i need a api getLocalIdent.
Functions similar to css-moudle getLocalIdent
from antd-theme-webpack-plugin.
@chenshuai2144 Did it work after this change ant-design/ant-design-pro@8e4e7d7 ?
from antd-theme-webpack-plugin.
no ,Because css-module。
I need getLocalIdent to customize the class name
from antd-theme-webpack-plugin.
@chenshuai2144 I don't know what is getLocalIdent
but if there is something that I can change to make it work, let me know
from antd-theme-webpack-plugin.
I hope that you can use this method to change the css classname before converting less.
from antd-theme-webpack-plugin.
@chenshuai2144 thank you so much for sharing this. I will look into this and will add in new release..
from antd-theme-webpack-plugin.
I have solved
from antd-theme-webpack-plugin.
Related Issues (20)
- Custom variable in specific name convention is not compiled HOT 2
- Theme changing transition
- config antd-prefix change theme not working
- Error: ENOENT: no such file or directory, open 'C:\Users\amin\Documents\GitHub\tagrani-front-end\node_modules\antd\lib\style\themes\@{root-entry-name}.less' HOT 7
- antd theme HOT 2
- 我好像找到给自己的代码加背景,边框线,跟随主题色解决的方法了。 HOT 1
- Tag in dark mode
- Filter out text-shadow in reducePlugin
- Question: Does it work to update font-family or font-size in addition to colors ? HOT 3
- error evaluating function `fade`: color.toHSL is not a function HOT 9
- Error: Cannot find module 'antd-theme-generator' HOT 1
- addAssets = (compilation, assets, callback), SyntaxError: Unexpected token = HOT 9
- generate double color.less file when pass config params outputFilePath different from 'color.less'
- ant tag color changes every complie HOT 3
- JavaScript heap out of memory when modify less file HOT 18
- TypeError: Cannot read property 'startsWith' of undefined HOT 2
- modal RTL problem
- indexFileName not in assets
- every time when project recompile pending at 95% emitting AntDesignThemePlugin in env vue3.x used by ant design vue HOT 6
- `darken`: color.toHSL is not a function AND my color.less is empty, i tired evey single solution HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from antd-theme-webpack-plugin.