Ant Design theme variables for Aliyun console design. Still being experimental, welcome to try out and help us to improve it.

Visit this link to preview.

Install

To install the Ant Design theme for Aliyun, run the following command:

$ npm install @ant-design/aliyun-theme

Usage

Webpack

To use the Aliyun theme with Webpack, you’ll need to adjust your webpack.config.js file as follows:

import aliyunTheme from '@ant-design/aliyun-theme';

module.exports = {
    module: {
        rules: [
            {
                test: /\.less$/,
                use: [
                    'less-loader', // Loader for compiling LESS
                    {
                        loader: 'less-loader',
                        options: {
                            modifyVars: aliyunTheme, // Applying the Aliyun theme
                        },
                    },
                ],
            },
        ],
    },
}

Umi

If you’re utilizing Umi, you can do so in your config.js or .umirc.js like this:

import aliyunTheme from '@ant-design/aliyun-theme';

export default {
    theme: aliyunTheme,
}

Use in Ant Design Pro: this link

Less

To include the Aliyun theme in your LESS files, simply add the following line:

@import '~@ant-design/aliyun-theme/index.less';

Troubleshooting

If you encounter issues while installing or using the Ant Design theme for Aliyun, here are some troubleshooting tips:

• Ensure you have the necessary permissions to install npm packages.
• If you encounter any build errors, verify that your webpack.config.js or config.js files are correctly set up. Check for syntax errors and ensure modules are correctly imported.
• Make sure you have installed less-loader if you’re using LESS.
• If the UI does not reflect the changes, clear your browser cache or check if CSS styles are being overridden.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

Now that you’ve set up your Ant Design theme for Aliyun, you can customize your console design however you see fit! Enjoy coding!