wuzekang / antd-theme

Provide runtime dynamic theme for ant design.
https://wuzekang.github.io/antd-theme
55 stars 14 forks source link

Doesn't work with react-app-rewired #18

Open MarkLyck opened 3 years ago

MarkLyck commented 3 years ago

I have tried to get this solution working with next.js, react-app-rewired + customize-cra and react-app-rewired vanilla.

All 3 attempts have failed for a really simple application.

the next.js and customize-cra attempts produced errors. But the vanilla react-app-rewired runs, it even displays the theme Selector and I can console log the output of useTheme. But no styles ever gets loaded.

Here's the config-overrides.js

const AntdThemePlugin = require('antd-theme/plugin');

module.exports = {
    webpack: function (config, env) {

        config.module.rules.push(
            {
                test: /\.less$/i,
                use: [
                    {
                        loader: AntdThemePlugin.loader,
                    },
                    {
                        loader: 'css-loader',
                    },
                    {
                        loader: 'less-loader',
                        options: {
                            lessOptions: {
                                javascriptEnabled: true,
                            }
                        },
                    },
                ],
            }
        )

        config.plugins.push(new AntdThemePlugin({
            // Variables declared here can be modified at runtime
            variables: ['primary-color'],
            themes: [
                {
                    name: 'default',
                    filename:  require.resolve('antd/lib/style/themes/default.less'),
                },
                {
                    name: 'dark',
                    filename: require.resolve('antd/lib/style/themes/dark.less'),
                },
                {
                    name: 'compact',
                    filename: require.resolve('antd/lib/style/themes/compact.less'),
                },
            ],
        }))

        return config;
    }
}

I also tried loading a basic .less file, and the output for this doesn't load. either :/

Please help, I have spent a full week trying to get a dynamic antd theme switcherr working with either next.js or CRA 🙏