Can't get CSS modules and antd styles to work at the same time
See original GitHub issueHi @ndbroadbent , @patricklafrance !
I am trying to get CSS Modules to work as well as antd
.
So far, I either have antd
’s styles working, or CSS Modules, but I can’t get both to work at the same time.
To get antd
’s styling to work, I have to comment out cssLoaderOptions...
(see in my code below), but then CSS Modules don’t work anymore.
If I leave cssLoaderOptions
, CSS Modules work, but antd seems to lose some styling. For example, I can still see some animation when clicking on a button
, but the color styling and shaping is gone.
Here’s a link to my repo.
const CracoAntDesignPlugin = require("craco-antd");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const WebpackBar = require("webpackbar");
// Don't open the browser during development
process.env.BROWSER = "none";
module.exports = {
webpack: {
plugins: [
new WebpackBar({ profile: true }),
...(process.env.NODE_ENV === "development"
? [new BundleAnalyzerPlugin({ openAnalyzer: false })]
: []),
],
},
plugins: [
{
plugin: CracoAntDesignPlugin,
options: {
modifyLessRule: function(lessRule, _context) {
lessRule.test = /\.less$/;
lessRule.exclude = undefined;
// console.log('lessRule', lessRule)
// console.log('JSON', JSON.stringify(lessRule.use))
return lessRule;
},
// CSS Modules. This makes the styling of antd to stop working. If I comment out, antd's styling works.
cssLoaderOptions: {
modules: true,
localIdentName: `${
process.env.NODE_ENV === "production"
? "[local]_[hash:base64:5]"
: "[path][name]__[local]-"
}-[hash:base64:8]`,
},
},
},
],
};
I’m using those versions:
"@craco/craco": "5.0.2",
"antd": "^3.16.6",
"craco-antd": "1.10.0",
"react-scripts": "3.0.0",
"typescript": "^3.4.5"
This is the bundle analyzer
when antd
works (when I comment out cssLoaderOptions
), 2.44Mb:
This is when CSS Module
work (2.36Mb)
Issue Analytics
- State:
- Created 4 years ago
- Reactions:2
- Comments:13 (2 by maintainers)
Top Results From Across the Web
Can't get CSS modules and antd styles to work at the same time
I am trying to get CSS Modules to work as well as antd . So far, I either have antd 's styles working,...
Read more >CSS Modules + Ant design in ReactJs does not work
config in Rule section it will work with Css modules and overriding less styles of antd components. { test: /\.less$/, include: [/src/], use: ......
Read more >Component-level CSS-in-JS - Ant Design
According to the style structure we determined from v4 and previous versions, the style of each component will not change under the same...
Read more >How to configure CSS and CSS modules in webpack
Before we configure CSS support in the webpack setup, let's first add a CSS file and use it. The first thing we are...
Read more >FAQs - styled-components
At this time we do not recommend using @import within cGS due to some issues ... In general, always use the css helper...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@gregoryforel Here’s my solution:
The first
CracoAntDesignPlugin
is to load the antd components and the customize theme variables file. And CSS modules option is turned off (by default), otherwise the antd component’s styles won’t be load properly.And the second
CracoLessPlugin
is to load application-level .module.less files, with CSS modules enabled.Updated the
cssLoaderOptions
, thanks to @pmosconi 's comment@mdluo, another solution is to use
getLocalIdent
:For third-party LESS files (i.e. those inside
node_modules
), you should returnlocalName
to avoid adding hash to css class names.