Craco start and craco build causing different css ordering

From: 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?

[cpconcertage]

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:

const CracoAntDesignPlugin = require("craco-antd");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  webpack: {
    configure: (webpackConfig, { env, paths }) => {
      webpackConfig = {
        ...webpackConfig,
        plugins: [
          ...webpackConfig.plugins.filter((element) => {
            if (element.options) {
              return !element.options.hasOwnProperty("ignoreOrder");
            }
            return true;
          }),
          new MiniCssExtractPlugin({
            filename: "static/css/[name].[contenthash:8].css",
            moduleFilename: this.moduleFilename,
            ignoreOrder: true,
            chunkFilename: "static/css/[name].[contenthash:8].chunk.css",
          }),
        ],
      };
      return webpackConfig;
    },
  },
  plugins: [{ plugin: CracoAntDesignPlugin }],
};

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!

Very helpful. I didn’t even have time to become a weary traveler!

[JacksonBates]

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:

const CracoAntDesignPlugin = require("craco-antd");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  webpack: {
    configure: (webpackConfig, { env, paths }) => {
      webpackConfig = {
        ...webpackConfig,
        plugins: [
          ...webpackConfig.plugins.filter((element) => {
            if (element.options) {
              return !element.options.hasOwnProperty("ignoreOrder");
            }
            return true;
          }),
          new MiniCssExtractPlugin({
            filename: "static/css/[name].[contenthash:8].css",
            moduleFilename: this.moduleFilename,
            ignoreOrder: true,
            chunkFilename: "static/css/[name].[contenthash:8].chunk.css",
          }),
        ],
      };
      return webpackConfig;
    },
  },
  plugins: [{ plugin: CracoAntDesignPlugin }],
};

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!