style is broken on build but works on dev env

Hi there I’m trying to use this plugin in my project I’m using

1. "next": "^10.0.5"
2. "antd": "^4.16.0"
3. "next-plugin-antd-less": "^1.8.0"
4. "less": "^4.1.2"

and here is my next config file

const withPlugins = require("next-compose-plugins");
const { getThemeVariables } = require("antd/dist/theme");
const lessToJS = require("less-vars-to-js");
const fs = require("fs");
const path = require("path");

// antd custom variables
const themeVariables = lessToJS(
  fs.readFileSync(
    path.resolve(__dirname, "./styles/antd-variables.less"),
    "utf8"
  )
);
const antdLessConfig = {
  modifyVars: {
    ...getThemeVariables({
      dark: true, // Enable dark mode
    }),
    ...themeVariables,
  },
  webpack(config) {
    return config;
  },
};
module.exports = withPlugins([[withAntdLess, antdLessConfig]]);

Everything is working fine on running yarn dev but on run yarn build then yarn start I found the style is broken all the styles i added is not used

[SolidZORO]

@NickBeukema hi, you just change _app.tsx import "./global.less" to require('./global.less'); can be fixed this problem. ref. https://github.com/SolidZORO/next-plugin-antd-less#how-to-import-global-less-style-eg-stylesless

I just know it works but I don’t know why.

[arielszabo]

Hi @SolidZORO, I’m having a similar issue with

1. “next”: “12.2.1”
2. “next-plugin-antd-less”: “1.8.0”
3. “antd”: “4.21.5”
4. “less”: “3.13.1”

When I run next dev the styles are looking fine but when building the project it seems like antd components with custom css style have the original antd style without the class I’ve created.

Would love your help here 😃 Thanks,