Unable to make it work properly

[empz]

I have a CRA 2.1.1 app and I've followed your setup step by step. I'm using your production-version of craco.config.js but without the pract plugin.

const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const WebpackBar = require("webpackbar");
const CracoAntDesignPlugin = require("craco-antd");
const path = require("path");

// 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: {
        customizeThemeLessPath: path.join(__dirname, "src/styles/antd/custom-theme.less")
      }
    }
  ]
};

I'm only using a few components from antd. Those components are rendered after some authentication process is completed. As soon as those components are rendered, all the antd stylesheets are injected in the document and overriding my variables.

So, it seems babel-plugin-import is not properly working because it should only load the css related to the components I'm using right? Also, the variables are overwritten when the styles are injected.

Any ideas?

[empz]

Here's the bundle map.

[ndbroadbent]

Hmm, the bundle looks ok to me. If it was importing everything then the .less boxes would be much bigger.

The less variables are part of the webpack config, and they affect the Less source files directly when they are being compiled into CSS. And it looks like the bundle-import-plugin and less-loader plugins are working, because you're loading the index.less files (and not their compiled CSS.)

Did you see the section about needing to restart webpack whenever you make changes to the variables?

[ndbroadbent]

Oh I saw you are also importing bootstrap.min.css in static/js/4.chunk.js. Maybe this CSS is overriding the Ant Design theme? (Ant Design doesn't use Bootstrap)

[empz]

Thanks for the quick reply!

I'm sorry, I was messing it up myself. Still trying to migrate from boostrap to antd and into this setup and got lost. But I got it working.

Thanks!

[ndbroadbent]

Oh great, glad to hear you figured it out!