antd styles do not load in Create react app

[kaiz-growfitter]

This is the webpack.config.js inside my .storybook folder inside CRA project-

const path = require("path");

module.exports = {
    module: {
        rules: [
            {
                loader: 'babel-loader',
                exclude: /node_modules/,
                test: /\.js$/,
                options: {
                    presets: ["@babel/react"],
                    plugins: [
                        ['import', {libraryName: "antd", style: "less"}]
                    ]
                },
            },
            {
                test: /\.less$/,
                loaders: [
                    "style-loader",
                    "css-loader",
                    {
                        loader: "less-loader",

                        options: {
                            javascriptEnabled: true
                        }
                    }
                ],
                include: path.resolve(__dirname, "./")
            }
        ]
    }
};

Expected behavior is that styles should load from antd. However this is not the case and plain html elements show up.

[Sajgon]

I am having the same issue, elements shows up with no styling trying to use this package and less with latest create-react-app.

@kaiz-growfitter what I can see in your settings style should be true, and not less according to the documentation.

Edit: According to here: https://ant.design/docs/react/customize-theme#Customize-in-less-file you cannot do any antd . less imports from your project or your plugin-import will not work.

[rustyonrampage]

In your index.js file, you can import ant style files:
import 'antd/dist/antd.css';

Reference: https://ant.design/docs/react/getting-started

[Wakkaba]

In your index.js file, you can import ant style files:
import 'antd/dist/antd.css';

Reference: https://ant.design/docs/react/getting-started

This really helped me, thanks a lot!

[dewana-dewan]

@rustyonrampage @Wakkaba The point of the correct configuration would be that it loads component-specific styles automatically wherever the components are used, so you manually don't have to do that.
https://www.npmjs.com/package/babel-plugin-import#example
Having the same issue! Any help would be appreciated. Thanks!

[prashantnl]

@rustyonrampage @Wakkaba The point of the correct configuration would be that it loads component-specific styles automatically wherever the components are used, so you manually don't have to do that.
https://www.npmjs.com/package/babel-plugin-import#example
Having the same issue! Any help would be appreciated. Thanks!

+1