lessVarsFilePath not works

[semoonpark]

I tried overwrite less vars in variables.less but it doesn't work at all.

In next.config.js

const withNx = require('@nrwl/next/plugins/with-nx')
const withImages = require('next-images')
const withAntdLess = require('next-plugin-antd-less')

const nextConfig = {
    nx: {
        svgr: true,
    },
    images: {
        disableStaticImages: true,
    },
    lessVarsFilePath: './styles/variables.less',
}

module.exports = withAntdLess(withImages(withNx(nextConfig)))

In .babelrc

{
  "presets": [
    "@nrwl/next/babel"
  ],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": true
      }
    ]
  ],
  "ignore": [
    "node_modules"
  ]
}

In styles/variables.less

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

@primary-color: #477593;
@border-radius-base: 5px;
@body-background: #f7f7f7;

And in the component Test

In pages/test.tsx

import {Button} from 'antd'

export const Test = () => (
    <Button type='primary'>antd button</Button>
)

export default Test

The button color is still the default one.

Is there anything missed that I have to add more?

Current environment is below

    "babel-plugin-import": "^1.13.3",
    "next-plugin-antd-less": "^1.5.2",
    "antd": "^4.16.13",

Edited

below configuration on next.config.js is working, so annoying

const nextConfig = {
    nx: {
    // Set this to false if you do not want to use SVGR
    // See: https://github.com/gregberge/svgr
        svgr: true,
    },
    // FIXME: https://github.com/twopluszero/next-images/issues/73 still got a problem on loading images
    images: {
        disableStaticImages: true,
    },
    lessVarsFilePath: './styles/variables.less', // not working
    modifyVars: {'@primary-color': '#000000'}, // working
}

[SolidZORO]

your variables.less is in __ROOT__/styles/ dir? or __ROOT__/src/styles/?

try change to lessVarsFilePath: './src/styles/variables.less' is working?

[semoonpark]

at root/styles

When I use the modifyVars option with lessVarsToJs, it works well.

const themeVariables = lessToJs(
    fs.readFileSync(path.resolve(__dirname, './styles/variables.less'), 'utf8'),
)
/**
 * @type {import('@nrwl/next/plugins/with-nx').WithNxOptions}
 **/

const nextConfig = {
    nx: {
        svgr: true,
    },
    images: {
        disableStaticImages: true,
    },
    // lessVarsFilePath: './styles/variables.less',
    modifyVars: themeVariables,
}

[bigbizze]

your variables.less is in __ROOT__/styles/ dir? or __ROOT__/src/styles/?

try change to lessVarsFilePath: './src/styles/variables.less' is working?

so even just adding a containing folder named whatever in root and place my styles folder inside of it (for e.g. as per your suggestion ./src/styles/x.less rather than ./styles/x.less), the function "additionalData" defined on line 328 of overrideWebpackConfig.js actually fires (this should be easily fixed and probably shouldn't be happening right..?) for anyone confused about this.

if your antd variables .less file at (after changing path) ./src/styles/x.less as commonly recommended looks something like this:

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

@primary-color: black; // change antd primary-color
@background-color-base: black;
@layout-header-background: green;
// ..

you also need to set "lessVarsFilePathAppendToEndOffContent" in next.config.js to true:

module.exports = withAntdLess({
  lessVarsFilePath: './src/styles/x.less',
  lessVarsFilePathAppendToEndOfContent: true,
  // ...

and then the variables at ./src/styles/x.less will be applied correctly

i'm assuming this should be pretty easy to fix & clean up so it's easier for people to work with but i don't have the time to contribute this myself currently.

thank you for the great project & work though!

[ildfreelancer]

@semoonpark based on your configuration, you are using nx, so you need to change

    lessVarsFilePath: './styles/variables.less',

to

    lessVarsFilePath: './apps/<your-apps-name>/styles/variables.less',

then it should works.

[JonneBR]

your variables.less is in __ROOT__/styles/ dir? or __ROOT__/src/styles/? try change to lessVarsFilePath: './src/styles/variables.less' is working?

so even just adding a containing folder named whatever in root and place my styles folder inside of it (for e.g. as per your suggestion ./src/styles/x.less rather than ./styles/x.less), the function "additionalData" defined on line 328 of overrideWebpackConfig.js actually fires (this should be easily fixed and probably shouldn't be happening right..?) for anyone confused about this.

if your antd variables .less file at (after changing path) ./src/styles/x.less as commonly recommended looks something like this:

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

@primary-color: black; // change antd primary-color
@background-color-base: black;
@layout-header-background: green;
// ..

you also need to set "lessVarsFilePathAppendToEndOffContent" in next.config.js to true:

module.exports = withAntdLess({
  lessVarsFilePath: './src/styles/x.less',
  lessVarsFilePathAppendToEndOfContent: true,
  // ...

and then the variables at ./src/styles/x.less will be applied correctly

i'm assuming this should be pretty easy to fix & clean up so it's easier for people to work with but i don't have the time to contribute this myself currently.

thank you for the great project & work though!

your variables.less is in __ROOT__/styles/ dir? or __ROOT__/src/styles/? try change to lessVarsFilePath: './src/styles/variables.less' is working?

so even just adding a containing folder named whatever in root and place my styles folder inside of it (for e.g. as per your suggestion ./src/styles/x.less rather than ./styles/x.less), the function "additionalData" defined on line 328 of overrideWebpackConfig.js actually fires (this should be easily fixed and probably shouldn't be happening right..?) for anyone confused about this.

if your antd variables .less file at (after changing path) ./src/styles/x.less as commonly recommended looks something like this:

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

@primary-color: black; // change antd primary-color
@background-color-base: black;
@layout-header-background: green;
// ..

you also need to set "lessVarsFilePathAppendToEndOffContent" in next.config.js to true:

module.exports = withAntdLess({
  lessVarsFilePath: './src/styles/x.less',
  lessVarsFilePathAppendToEndOfContent: true,
  // ...

and then the variables at ./src/styles/x.less will be applied correctly

i'm assuming this should be pretty easy to fix & clean up so it's easier for people to work with but i don't have the time to contribute this myself currently.

thank you for the great project & work though!

Thank you so much, after working on it for one day it finally worked.