SolidZORO / next-plugin-antd-less

🎩 Use Antd (Less) with Next.js v12, Zero Dependency on other Next-Plugins.
MIT License
345 stars 48 forks source link

Doesn't work with Antd 4.14+ #42

Closed jeanmatthieud closed 3 years ago

jeanmatthieud commented 3 years ago

I used the package with Antd 4.13.1 After upgrading to Antd 4.14+ (or Antd 4.15+), the customization stopped working.

I have the latest plugin release (v1.0.8) And next@10.1.3

My less file :

// - Custom variables
@customer-color: #006FBA;
@customer-background-color: #FAFDFF;

// - Antd variables
@primary-color: @customer-color;
@link-color: @customer-color;
@heading-color: @customer-color;
@border-radius-base: 4px;
@layout-body-background: @customer-background-color;
@layout-sider-background: #FFFFFF;
@layout-header-background: #FFFFFF;
@layout-trigger-background: @customer-color;
@layout-header-color: @primary-color;
@alert-message-color: rgba(0, 0, 0, 0.85);

.ant-layout-header {
  border-bottom: 1px solid @primary-color;
}

My next.config.js file :

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

module.exports = withAntdLess({
  lessVarsFilePath: './styles/antd.less',
  cssLoaderOptions: { },
  i18n: {
    locales: ['en', 'fr'],
    defaultLocale: 'fr',
  },
});
SolidZORO commented 3 years ago

Antd 14? your say Antd 4?

https://github.com/SolidZORO/next-plugin-antd-less#tips

jeanmatthieud commented 3 years ago

Hi, Sorry, I edited my issue. I will check your tips, and issue #36

jeanmatthieud commented 3 years ago

I tried to add @import '~antd/lib/style/themes/default.less'; to my less file, but it didn't changed anything...

gino8080 commented 3 years ago

does not work also with antd "^4.13.0", i need to set in modifyVars: { '@primary-color': '#ff0000' }.. to get it working

akay0214 commented 3 years ago

does not work also with antd "^4.13.0", i need to set in modifyVars: { '@primary-color': '#ff0000' }.. to get it working

Where have you added this "modifyVars" thing? in next.config.js, babelrc or less file? Could you please provide an example?

akay0214 commented 3 years ago

does not work also with antd "^4.13.0", i need to set in modifyVars: { '@primary-color': '#ff0000' }.. to get it working

I've added it to next.config.js and it still doesn't work Antd 4.15+

SolidZORO commented 3 years ago

@akay0214 only webpack4 now.

akay0214 commented 3 years ago

@akay0214 only webpack4 now.

I use webpack 4

SolidZORO commented 3 years ago

can you add a .babelrc.js? https://github.com/SolidZORO/next-plugin-antd-less/blob/master/README.md#usage

akay0214 commented 3 years ago

can you add a .babelrc.js? https://github.com/SolidZORO/next-plugin-antd-less/blob/master/README.md#usage

I have .babelrc file

{ presets: [ 'next/babel' ], plugins: [ [ 'superjson-next' ], [ 'import', { libraryName: 'antd', style: true } ] ] }

SolidZORO commented 3 years ago

@akay0214 I can't help you because there is not enough information, maybe you can open a new issue, describe your problem in detail and give the error.

h4murabi commented 2 years ago

Here was solved using:

lessVarsFilePathAppendToEndOfContent: true,