How to change ant-prefix?

[Woong25]

I tried to change the @ant-prefix variable but it failed. Below is my code.

//vars.less
@import './default.less';
@blue: @blue-base;
@purple: @purple-base;
@cyan: @cyan-base;
@green: @green-base;
@magenta: @magenta-base;
@pink: @pink-base;
@red: @red-base;
@orange: @orange-base;
@yellow: @yellow-base;
@volcano: @volcano-base;
@geekblue: @geekblue-base;
@lime: @lime-base;
@gold: @gold-base;
@asdasd: @gold-base;

// default.less
@import '~antd/lib/style/themes/default.less';
@ant-prefix: blah

// next.config.js
const withAntdTheme = generateTheme({
  antDir: path.join(__dirname, './node_modules/antd'),
  stylesDir: path.join(__dirname, './static/assets/styles/theme'),
  varFile: path.join(__dirname, './static/assets/styles/theme/vars.less'),
  outputFilePath: path.join(__dirname, './.next/static/color.less')
});

And it's part of the plugin's code, but it seems that the code is fixed and doesn't support it.

.ant-tag-pink {  color: #eb2f96;  background: #fff0f6;  border-color: #ffadd2;}
.ant-tag-pink-inverse {color: #fff;background: #eb2f96;border-color: #eb2f96;}
.ant-tag-magenta {color: #eb2f96;  background: #fff0f6;  border-color: #ffadd2;}
.ant-tag-magenta-inverse {color: #fff;background: #eb2f96;border-color: #eb2f96;}
.ant-tag-red {color: #f5222d;background: #fff0f6;border-color: #ffa39e;}
.ant-tag-red-inverse {color: #fff;background: #f5222d;border-color: #f5222d;}
.ant-tag-volcano {color: #fa541c;background: #fff2e8;border-color: #ffbb96;}
.ant-tag-volcano-inverse {color: #fff;background: #fa541c;border-color: #fa541c;}
.ant-tag-orange {color: #fa8c16;background: #fff7e6;border-color: #ffd591;}
.ant-tag-orange-inverse {color: #fff;background: #fa8c16;border-color: #fa8c16;}
.ant-tag-yellow {color: #fadb14;background: #feffe6;border-color: #fffb8f;}
.ant-tag-yellow-inverse {color: #fff;background: #fadb14;border-color: #fadb14;}
.ant-tag-gold {color: #faad14;background: #fffbe6;border-color: #ffe58f;}
.ant-tag-gold-inverse {color: #fff;background: #faad14;border-color: #faad14;}
.ant-tag-cyan {color: #13c2c2;background: #e6fffb;border-color: #87e8de;}
.ant-tag-cyan-inverse {color: #fff;background: #13c2c2;border-color: #13c2c2;}
.ant-tag-lime {color: #a0d911;background: #fcffe6;border-color: #eaff8f;}
.ant-tag-lime-inverse {color: #fff;background: #a0d911;border-color: #a0d911;}
.ant-tag-green {color: #52c41a;background: #f6ffed;border-color: #b7eb8f;}
.ant-tag-green-inverse {color: #fff;background: #52c41a;border-color: #52c41a;}
.ant-tag-blue {color: #1890ff;background: #e6f7ff;border-color: #91d5ff;}
.ant-tag-blue-inverse {color: #fff;background: #1890ff;border-color: #1890ff;}
.ant-tag-geekblue {  color: #2f54eb;  background: #f0f5ff;  border-color: #adc6ff;}
.ant-tag-geekblue-inverse {color: #fff;background: #2f54eb;border-color: #2f54eb;}
.ant-tag-purple {color: #722ed1;  background: #f9f0ff;  border-color: #d3adf7;}
.ant-tag-purple-inverse {color: #fff;background: #722ed1;border-color: #722ed1;}

Please update to be supported!

[OhYee]

I have add prefix in themeOptions and update next-dynamic-antd-theme to v0.0.14

https://github.com/OhYee/next-dynamic-antd-theme/blob/70be439fa24f80fd59a1ffa6d7b9ff23e5c11446/plugin.js#L19-L32

You can use prefix: 'blah' after update to v0.0.14

const withAntdTheme = generateTheme({
  antDir: path.join(__dirname, './node_modules/antd'),
  stylesDir: path.join(__dirname, './static/assets/styles/theme'),
  varFile: path.join(__dirname, './static/assets/styles/theme/vars.less'),
  outputFilePath: path.join(__dirname, './.next/static/color.less'), 
+ prefix: 'blah',
});

[Woong25]

Thank you!!

Is it possible to specify a style variable for antd? for example

// vars.less
@import '~antd/lib/style/themes/default.less';

@ant-prefix: blah;
@primary-color: #516fca;
@border-radius-base: 4px;
@layout-header-background: #fff;
@layout-body-background: #fafafa;
@menu-bg: inherit;

I want to apply it this way, but it doesn't apply if I add it to the vars.less file. Also I get this error

error [LessError: unexpected token] {
  stack: undefined,
  type: 'Syntax',
  filename: 'input',
  index: 104690,
  line: 3558,
  column: 2,
  callLine: NaN,
  callExtract: undefined,
  extract: [
    '',
    '@{click-animating-true},',
    '@{click-animating-with-extra-node-true} {'
  ]
}

Do I need other settings?

[OhYee]

This plugin based on mzohaibqc/antd-theme-generator, and antd-theme-generator only support color variables. So, you can not specify @ant-prefix @border-radius-base @menu-bg

I am sorry, but I have no idea to fix these.

[Woong25]

I just put the color variable, but it doesn't apply What's the problem?...

// next.config.js
const withAntdTheme = generateTheme({
  antDir: path.join(__dirname, './node_modules/antd'),
  stylesDir: path.join(__dirname, './static/assets/styles/theme'),
  varFile: path.join(__dirname, './static/assets/styles/theme/vars.less'),
  themeVariables: ['@primary-color', '@layout-header-background', '@layout-body-background'],
  outputFilePath: path.join(__dirname, './.next/static/color.less'),
  lessFilePath: `${prefix}_next/static/color.less`,
  lessJSPath: 'https://cdnjs.cloudflare.com/ajax/libs/less.js/3.11.3/less.min.js',
});

// vars.less
@import'~antd/lib/style/themes/default.less';
@primary-color: #516fca;
@layout-header-background: #fff;
@layout-body-background: #fafafa;

Isn't it used like this?

I ran the code in the example folder, but the values in vars.less are not applied.

// next.config.js (example code)
const withLess = require('@zeit/next-less');
const withSass = require('@zeit/next-sass');
const withPlugins = require('next-compose-plugins');
const path = require('path');
const generateTheme = require('next-dynamic-antd-theme/plugin');
const withTM = require('next-transpile-modules');
const cssLoaderGetLocalIdent = require('css-loader-getlocalident');
const withCss = require('@zeit/next-css');

const prod = process.env.NODE_ENV === 'production';
const prefix = prod ? '/next-dynamic-antd-theme/' : '/';

console.log(`${prefix}_next/static/color.less`);
const withAntdTheme = generateTheme({
  antDir: path.join(__dirname, './node_modules/antd'),
  stylesDir: path.join(__dirname, './theme'),
  varFile: path.join(__dirname, './theme/vars.less'),
  outputFilePath: path.join(__dirname, './.next/static/color.less'),
  lessFilePath: `${prefix}_next/static/color.less`,
  lessJSPath: 'https://cdnjs.cloudflare.com/ajax/libs/less.js/3.11.3/less.min.js',
});

const css = [withCss, {
  cssModules: true, 
  cssLoaderOptions: { 
    localIdentName: '[local]',
    importLoaders: 2
  }
}]

withAntd = (nextConfig = {}) => {
  return Object.assign({}, nextConfig, {
    lessLoaderOptions: {
      javascriptEnabled: true,
    },
    cssModules: true,
    cssLoaderOptions: {
      camelCase: true,
      localIdentName: '[local]___[hash:base64:5]',
      getLocalIdent: (context, localIdentName, localName, options) => {
        let hz = context.resourcePath.replace(context.rootContext, '');
        console.log('localIdentName : ' + localIdentName)
        if (/node_modules/.test(hz)) {
          console.log(localIdentName, localName)
          return localName;
        } else {
          console.log(localIdentName, localName)
          return cssLoaderGetLocalIdent(context, localIdentName, localName, options);
        }
      },
    },
    webpack(config, options) {
      if (config.externals) {
        const includes = [/antd/];
        config.externals = config.externals.map((external) => {
          if (typeof external !== 'function') return external;
          return (ctx, req, cb) => {
            return includes.find((include) =>
              req.startsWith('.') ? include.test(path.resolve(ctx, req)) : include.test(req),
            )
              ? cb()
              : external(ctx, req, cb);
          };
        });
      }

      return typeof nextConfig.webpack === 'function'
        ? nextConfig.webpack(config, options)
        : config;
    },
  });
};

module.exports = withPlugins([withAntd, withLess, withTM, withSass, css, withAntdTheme], {
  serverRuntimeConfig: {},
  assetPrefix: prefix,
  webpack: (config, options) => {
    // config.node = { fs: 'empty' };
    return config;
  },
});

[OhYee]

I did the test as you asked.

1. The Ant Design using less to set the default color, you can refer to https://ant.design/docs/react/customize-theme-cn This section will load along with the page.

2. Calling changeTheme in componentDidMount of the page will load color.less(passing empty object). At this point, the content in var.less will take effect (but it doesn't seem perfect).

3. If you pass in the corresponding theme variable for changeTheme, it will be rendered in a specific color.

2 and 3 should take a while to load.

I have commit a version 0.0.15, allowing empty objects to be committed in changeTheme. Also add a customThemes option in the plug-in to override parts of the default and dark styles.

If you can afford to take a few seconds to load color.less, you can call changeTheme({}) or changeTheme("default") after the page loads. To use the default theme (use customThemes["default"] to override the color you want to change).

I failed to test 1, but it may get better results.

Hopefully this will help you, if you still have other problems, you may need to modify upstream dependencies.

[hadnet]

Same problem as woong25's last reply. I can't change @primary-color using any method but changeTheme({'@primary-color': 'whatevercolor'}). The problem is that takes too long for my custom primary-color to replaced the default one so it is kinda clumsy (the default primary color show up first and then it's replaced with my custom primary color). When this 0.0.15 will be released?

[OhYee]

@hadnet

Sorry, I only pushed 0.0.15 to Github and forgot to put it to NPM. You can now use 0.0.15.

But 0.0.15 still doesn't seem to be an effective solution to your problem. As explained by the upstream dependency, it should be possible to set the default color in the var.less file as well as in next.config.json, but I tested this to be invalid. Maybe there is a problem in my understanding of upstream dependence. If you have any good ideas, please discuss with me.

[hadnet]

@OhYee Yeah, 0.0.15 didn't help. I think this project https://github.com/JoseRFelix/react-css-theme-switcher#readme can help. The problem with react-css-theme-switcher project is that one needs to use gulp and kinda lose the switch transition animation. It would be nice like merge your Webpack approach with the JoseRFelix approach, don't you think?

[OhYee]

@hadnet @Woong25

I released v0.1.0 and tried to set the @primary-color to green, which seems to meet your requirements.

https://gh-pages.oyohyee.com/next-dynamic-antd-theme/

You may need to modify the previous next.config.js and .babelrc. For more details, see example

[hadnet]

I installed the v0.1.0, modify the next.config.js (copy-pasted) and .babelrc ("css" -> "true") and now I get my primary-color but it doesn't load the antd styles. So my site renders with my primary-color but without the antd styles. The only difference is I'm using Next.js 10 and antd 4.7.3. When set .babelrc back to "css" and set a withCss to wrap withLess up it is working fine but with the previous behavior (takes too long for my custom primary-color to replaced the default antd blue one).

[OhYee]

@hadnet

Try the custom theme mentioned in the official documentation without using next-dynamic-antd-theme

https://ant.design/docs/react/customize-theme#Customize-in-webpack

This plugin simply set modifyVars, and if the style is missing, there may be a problem with the antd configuration itself. (Dynamic theme can only change color by overwriting the corresponding color, you still need to configure and normally)