Next.js中Ant Design自定义主题不生效问题排查求助

环境与配置代码 #

package.json #

{
  "dependencies": {
    "@ant-design/icons": "^4.8.0",
    "antd": "^4.24.3",
    "next": "^12.3.1",
    "next-plugin-antd-less": "^1.8.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "styled-components": "^5.3.6",
    "styled-reset": "^4.4.2"
  },
  "devDependencies": {
    "babel-plugin-import": "^1.13.5"
  }
}

.babelrc #

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

next.config.js #

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

module.exports = withAntdLess({  
  modifyVars: { '@primary-color': '#04f' },  
  lessVarsFilePath: './styles/variables.less',  
  lessVarsFilePathAppendToEndOfContent: false,  
  cssLoaderOptions: {},

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

styles/variables.less #

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

@primary-color: #52c41a;

pages/_app.js #

import React from 'react';
import { ThemeProvider } from 'styled-components';

import "../styles/variables.less";
import GlobalStyles from '../styles/GlobalStyles';
import Theme from '../styles/Theme';

const Home = ({ Component, pageProps }) => {
  return (
    <>     
      <GlobalStyles />
      <ThemeProvider theme={Theme}>
        <Component {...pageProps} />         
      </ThemeProvider>
    </>
  );
};

export default Home;

运行npm run dev日志 #

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
warn  - Invalid next.config.js options detected: 
  - The root value has an unexpected property, modifyVars, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, future, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, staticPageGenerationTimeout, swcMinify, trailingSlash, typescript, useFileSystemPublicRoutes, webpack).
  - The root value has an unexpected property, lessVarsFilePath, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, future, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, staticPageGenerationTimeout, swcMinify, trailingSlash, typescript, useFileSystemPublicRoutes, webpack).      
  - The root value has an unexpected property, lessVarsFilePathAppendToEndOfContent, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, future, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, staticPageGenerationTimeout, swcMinify, trailingSlash, typescript, useFileSystemPublicRoutes, webpack).
  - The root value has an unexpected property, cssLoaderOptions, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, future, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, staticPageGenerationTimeout, swcMinify, trailingSlash, typescript, useFileSystemPublicRoutes, webpack).       

See more info here: https://nextjs.org/docs/messages/invalid-next-config
info  - Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc.js" https://nextjs.org/docs/messages/swc-disabled
info  - Using external babel configuration from C:\Users\Administrator\OneDrive\Desktop\Training\.babelrc.js
event - compiled client and server successfully in 23.4s (193 modules)

排查与修复建议 #

• 修正next.config.js配置结构
  Next.js 12会严格校验根配置属性，modifyVars等Less相关配置需嵌套在antdLessOptions对象中，避免配置校验报错：

  const withAntdLess = require('next-plugin-antd-less');
  
  module.exports = withAntdLess({
    antdLessOptions: {
      modifyVars: { '@primary-color': '#04f' },
      lessVarsFilePath: './styles/variables.less',
      lessVarsFilePathAppendToEndOfContent: false,
      cssLoaderOptions: {},
    },
    webpack(config) {
      return config;
    },
  });
  

• 调整variables.less变量定义顺序
  Less变量是"按需编译"，需先定义自定义变量，再导入Ant Design的主题和样式，才能覆盖默认值：

  @primary-color: #52c41a;
  @import '~antd/lib/style/themes/default.less';
  @import '~antd/dist/antd.less';
  

• 移除冲突的Babel插件配置
  next-plugin-antd-less已内置Ant Design按需加载逻辑，无需额外配置babel-plugin-import，删除.babelrc中的import插件配置（或直接删除.babelrc，如果无其他自定义Babel需求）。

• 避免样式重复导入
  next-plugin-antd-less已通过lessVarsFilePath加载变量文件，删除pages/_app.js中的import "../styles/variables.less";，避免样式优先级冲突。

内容的提问来源于stack exchange，提问作者Clloud