style is broken on build but works on dev env

[shereen-fathy]

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

[NickBeukema]

How are you adding styles to your components? I'm having a similar issue where I'm converting an application and all of our components are imported as such, and styles are only applied in dev, not production builds:

import React, { ReactElement } from "react";
import "./Heading.less";

interface Props {}

export default function Heading(props: Props): ReactElement {
  // Removed code for brevity
  return <h1 className="heading">{props.children}</h1>
}

[SolidZORO]

@NickBeukema try #52 (comment)

[NickBeukema]

@SolidZORO I have removed all third party packages and have run yarn install --force. I'm not getting any errors in my build, and the development server runs fine, I'm just not seeing any of my custom styles included in a build.

[SolidZORO]

@SolidZORO I have removed all third party packages and have run yarn install --force. I'm not getting any errors in my build, and the development server runs fine, I'm just not seeing any of my custom styles included in a build.

can you share a demo repo for me?

[NickBeukema]

Here is a demo repo showing the issue, give the readme a read and it'll show exactly what's wrong. Thanks a ton for looking into this @SolidZORO, it's very much appreciated. Let me know if you have any other questions.

https://github.com/NickBeukema/nextjs-antd-repro

[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.

[justjavac]

try

echo 'declare module "*.less";' > less.d.ts

or

declare module "*.less" {
  const classes: { [key: string]: string };
  export default classes;
}

[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,