Less-loader requirement and variable issues

[NicholasG04]

Hi, first of all thank you very much for this plugin.

I had an issue where, unlike your example, I got an error of Module not found. Cannot resolve less-loader and so installed the same less-loader version as you are using with this plugin. This fixed that issue, but when importing antd LESS files from my vars file I'm now getting issues such as the following (this one is from @import '~antd/lib/style/dark.less';):

// color palettes
@blue-1: mix(color(~`colorPalette('@{blue-base}', 8) `), @component-background, 15%);
           ^
Error evaluating function `color`: variable @blue-base is undefined
      Error in /usr/dash/node_modules/.pnpm/antd@4.9.4_react-dom@17.0.1+react@17.0.1/node_modules/antd/lib/style/themes/dark.less (line 5, column 13)

I thought this might be due to a setting about importing files without the .less extension, but changing that doesn't seem to fix it. Could it be about relative pathnames maybe? Not sure if I can think of a way to fix this. Thanks!

Also, I'm using less@3.12.2 to avoid the issues with round(), ceil() etc from antd.

Dependencies:

  "dependencies": {
    "@ant-design/colors": "^5.0.1",
    "@ant-design/icons": "^4.3.0",
    "antd": "^4.9.4",
    "css-loader": "^5.0.1",
    "dynamic-antd-theme": "^0.7.1",
    "less": "3.12.2",
    "less-loader": "7.1.0",
    "next": "10.0.3",
    "next-plugin-antd-less": "^0.1.3",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "tslib": "^2.0.3"
  }

next.config.js:

/* eslint-disable */
const withAntdLess = require('next-plugin-antd-less');

module.exports = withAntdLess({
    lessVarsFilePath: './src/styles/vars.less',
    cssLoaderOptions: {
        sourceMap: false,
        esModule: false,
        modules: {
            mode: 'local',
        },

    },

    webpack(config) {
        return config;
    }
});

src/styles/vars.less:

:root {
  @import '~antd/lib/style/index.less';
}

:root.dark {
  @import '~antd/lib/style/dark.less';
}

Edit: I also see that relativeUrls is true by default in less-loader (https://webpack.js.org/loaders/less-loader/#options) so I am very confused as to why this might happen.

[SolidZORO]

Sorry I'm just now seeing this issues. solved yet?

You can see if this project works for you. https://github.com/SolidZORO/mkn

[NicholasG04]

No, I chose to use Chakra-UI because it has better support for React in almost every way! Sorry.