Craco start and craco build causing different css ordering
See original GitHub issueFrom: https://github.com/sharegate/craco/issues/57
We recently moved over to craco from react-app-rewired, in conjunction with ant-design. However the css is applied differently when running locally compared to running the completed build. Below is the contents of the craco.config.js file.
test
const CracoAntDesignPlugin = require('craco-antd');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const WebpackBar = require('webpackbar');
module.exports = {
plugins: [{ plugin: CracoAntDesignPlugin }],
webpack: {
plugins: [
new WebpackBar({ profile: true }),
],
},
};
Is this the correct way to ensure that the ant-d styles will be applied last, or have I missed something?
Issue Analytics
- State:
- Created 5 years ago
- Reactions:4
- Comments:9 (2 by maintainers)
Top Results From Across the Web
Craco start and craco build causing different css ordering #57
We recently moved over to craco from react-app-rewired, in conjunction with ant-design. However the css is applied differently when running locally compared ...
Read more >Issue with Upgrade from Tailwind v2 to v3 React Js using Craco
First make sure to checkout to different branch or push your code ... First run npm uninstall @craco/craco autoprefixer postcss tailwindcss
Read more >craco-less-fix - npm
Start using craco-less-fix in your project by running `npm i craco-less-fix`. There are no other projects in the npm registry using ...
Read more >Quick Start with Electron using React — Realm - MongoDB
Versions other than those may lead to errors while building the application ... In order to override the preconfigured webpack values, create a...
Read more >style-loader - webpack
Inject CSS into the DOM. Getting Started. To begin, you'll need to install style-loader : npm install --save ...
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
Very helpful. I didn’t even have time to become a weary traveler!
I’m just leaving my notes here for potential weary travelers!
I encountered a related issue to this CSS ordering warning coming from MiniCssExtractPlugin. The warnings were making my CI fail, but the app worked fine.
I decided to suppress the warnings, as outlined here: https://github.com/webpack-contrib/mini-css-extract-plugin/blob/v0.8.0/README.md#remove-order-warnings
However, MiniCssExtractPlugin already exists in the original webpack config, so I had to replace it with a new one, with ignoreOrder set to true. My final craco.config.js looks like this:
I’d love a better way of targeting the original MiniCss plugin to remove it than the naive filter I used - but this was a 1am decision after many hours trying to resolve the issue - happy to hear a better way.
Hope this helps someone!