Variables don't work

[akay0214]

Hi,

I have the following build:

"antd": "^4.15.4"
"next": "10.1.3"
"next-plugin-antd-less": "^1.1.4"
"babel-plugin-import": "^1.13.3",
"babel-plugin-superjson-next": "^0.2.3",
"less": "^2.7.3",
 "@zeit/next-less": "^1.0.1",

my next.config.js file content:

const path = require('path'); const withAntdLess = require('next-plugin-antd-less');

module.exports = withAntdLess({
    env: {
        STRAPI_API_URL: 'http://localhost:1337',
    },
    sassOptions: {
        includePaths: [path.join(__dirname, 'styles')],
    },
    // optional
    lessVarsFilePath: './styles/antd.variables.less',
    // optional
    lessVarsFilePathAppendToEndOfContent: false,
    // optional https://github.com/webpack-contrib/css-loader#object
    cssLoaderOptions: {},

    // Other Config Here...

    webpack: (config, {buildId, dev, isServer, defaultLoaders, webpack}) => {
        if (!isServer) {
            config.node = {
                fs: 'empty'
            }
        }
        return config
    },
});

.babelrc.js file is in place:

module.exports = {
    presets: [['next/babel']],
    plugins: [
        ['superjson-next'],
        ['import', { libraryName: 'antd', style: true }]
    ],
};

I have /styles/antd.less file, which I import as a global in my next js app. The content of this file:

@import "~antd/dist/antd.less"; @import "antd.app.less";

/styles/antd.app.less file has my custom global styles

And /styles/antd.variables.less file has all variables I want to override (everything is set to red color for testing purposes):

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

@primary-color: #f00; // primary color for all components
@link-color: #f00; // link color
@success-color: #f00; // success state color
@warning-color: #f00; // warning state color
@error-color: #f5222d; // error state color
@font-size-base: 14px; // major text font size
@heading-color: rgba(255, 8, 8, 0.85); // heading text color
@text-color: rgba(255, 0, 0, 0.65); // major text color
@text-color-secondary: rgba(255, 1, 1, 0.45); // secondary text color
@disabled-color: rgba(255, 0, 0, 0.25); // disable state color
@border-radius-base: 4px; // major border radius
@border-color-base: #ff0000; // major border color
@box-shadow-base: 0 2px 8px rgba(253, 0, 0, 0.15); // major shadow for layers

I've tried with @import '~antd/lib/style/themes/default.less'; and without it.

Same result all the time, variables are still have default values. Moreover, I have some weird behaviour of antd submenu component. It's rendering all the elements correctly, when I hover the submenu it adds appropriate classes, but I cannot see submenu on the screen. Seems like styles are messed up, I don't think it's compiled correctly.

[SolidZORO]

you can remove package.json all about less deps, e.g.

"less": "^2.7.3",
"@zeit/next-less": "^1.0.1",

just keep next-plugin-antd-less.

and then yarn install --force.

[akay0214]

I've removed dependencies you have mentioned and now I cannot even compile:

info  - Loaded env from /Users/akay/zeffir-frontend/src/.env
info  - Using webpack 4. Reason: future.webpack5 option not enabled https://nextjs.org/docs/messages/webpack5
info  - Using external babel configuration from /Users/akay/zeffir-frontend/src/.babelrc.js
error - ./pages/_app.tsx:1:0
Module not found: Can't resolve 'less-loader'
> 1 | import '../styles/antd.less';
  2 | import 'react-image-crop/lib/ReactCrop.scss';

[SolidZORO]

@akay0214 yarn install --force

[akay0214]

@akay0214 yarn install --force

Finally, it works!!! thanks a lot @SolidZORO

[akay0214]

@SolidZORO , I have another problem with the plugin. One of my dependencies is trying to load it's own css and seems like web pack doesn't know how to do that.

error - ./node_modules/react-js-cron/dist/esm/styles.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/react-js-cron/dist/esm/Cron.js

[ltujiba]

I followed you instruction to remove less related package, but I still got this error

error - ./node_modules/antd/lib/button/style/index.js:5:0 Module not found: Can't resolve 'less-loader' null Both modifyVars and lessVarsFilePath doesn't work.

I check the downloaded packages, it already contains the less loader.

modifyVars does work, if I put less-loader in my package-json. Howver, the lessVarsFilePath still doesn't work, although there's no error.

Here is my config

module.exports = withAntdLess({ // optional lessVarsFilePath = './src/styles/variables.less', future: { webpack5: true, }, });

{ "antd": "~4.16.0", "next": "~10.2.2", "next-plugin-antd-less": "~1.2.1", "prop-types": "~15.7.2", "react": "file:../../node_modules/react", "react-dom": "file:../../node_modules/react-dom", "sass": "~1.32.13" }

[SolidZORO]

@ltujiba remove your package.json all about less libs, and yarn install --force

[Meansereirith]

@SolidZORO I'm still having the issue after removing the less dependency and yarn install --force.

package.json

"dependencies": {
    "@ant-design/icons": "^4.6.4",
    "@types/lodash": "^4.14.172",
    "antd": "^4.16.12",
    "axios": "^0.21.1",
    "babel-plugin-import": "^1.13.3",
    "dotenv": "^10.0.0",
    "formik": "^2.2.9",
    "formik-antd": "^2.0.1",
    "lodash": "^4.17.21",
    "next": "^11.0.1",
    "next-images": "^1.8.1",
    "next-redux-saga": "^4.1.2",
    "next-redux-wrapper": "^7.0.2",
    "node-sass": "^4.14.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.4",
    "redux": "^4.1.1",
    "redux-persist": "^6.0.0",
    "redux-saga": "^1.1.3",
    "yup": "^0.32.9"
  },
  "devDependencies": {
    "@types/node": "^16.7.10",
    "@types/react": "^17.0.19",
    "next-compose-plugins": "^2.2.1",
    "next-plugin-antd-less": "^1.4.3",
    "redux-devtools-extension": "^2.13.9",
    "typescript": "^4.4.2"
  }

error - ./node_modules/antd/lib/notification/style/index.less
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @import '../../style/themes/index';
| @import '../../style/mixins/index';
| @import './customize.less';

[SolidZORO]

@Meansereirith try to install css-loader ?

[Meansereirith]

@SolidZORO still not working is there any other method. I can try

[Meansereirith]

@SolidZORO I got it working. The issue was I was using next-compose-plugins with next-images. The solution was next-images comes first then next-plugin-antd-less. Thank you so much for your assist.

[hoatep]

@SolidZORO@Meansereirith Thanks for the solution, it works for me.

[Sahejmaharjan1]

@Meansereirith @SolidZORO I'm having a similar issue..

./node_modules/react-multi-carousel/lib/styles.css
HookWebpackError: Module parse failed: Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
-- inner error --
Error: Module parse failed: Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

next.config.js

// eslint-disable-next-line @typescript-eslint/no-var-requires
const withPlugins = require('next-compose-plugins');
// eslint-disable-next-line @typescript-eslint/no-var-requires
const withAntdLess = require('next-plugin-antd-less');

const pluginAntdLess = withAntdLess({
  // modifyVars: {
  //   '@THEME--DARK': 'theme-dark',
  // },
  lessVarsFilePath: './styles/antdStyles.less',
  lessVarsFilePathAppendToEndOfContent: true,
  cssModules: true,
  // cssLoaderOptions: {
  //   esModule: false,
  //   sourceMap: false,
  //   modules: {
  //     mode: 'local',
  //   },
  // },
});

module.exports = withPlugins([[pluginAntdLess]], {
  webpack: (config) => {
    return config;
  },
});

.babelrs.js

module.exports = {
    presets: [['next/babel']],
    plugins: [['import', { libraryName: 'antd', style: true }]],
};

package.json

"next-compose-plugins": "^2.2.1",
"next-plugin-antd-less": "^1.4.3",
"css-loader": "^6.3.0",

is there any configuration issue? any help is appreciated.

[SolidZORO]

@Sahejmaharjan1 https://github.com/SolidZORO/next-plugin-antd-less#%EF%B8%8F-faq

[Sahejmaharjan1]

@SolidZORO i'm importing in _app.tsx in as css here's my _app.tsx file

import '@styles/antdStyles.less';
import '@styles/globals.scss';
import 'nprogress/nprogress.css';
import 'react-multi-carousel/lib/styles.css';

[SolidZORO]

@Sahejmaharjan1 looks like a problem with react-multi-carousel in SSR.

https://stackoverflow.com/questions/67627482/react-multi-carousel-doesnt-do-server-side-render

[Sahejmaharjan1]

@SolidZORO don't think it's related to SSR.. the build error shows even before reaching the Carousel component.. error occurs on importing react-multi-carousel/lib/styles.css... if I remove next-plugin-antd-lesspackage, .babelrs.js and next.config.js configurations then it works fine. Can't seem to know how to resolve it.. maybe should remove react-multi-carousel package itself.. Thanks @SolidZORO. If you get any more information regarding it please let me know.

[kimmy-wang]

same issue.