reactjs - 如何在 Next.js 中使用自定义主题配置 Ant Design 并支持 CSS 模块功能

Question

我正在使用 Ant Design 构建一个基于 SSR(使用 Next.js)的 ReactJs 项目。但是我自定义后 next.config.js 支持 Ant Design 的配置，我不能使用 CSS Module 特征。

Next.js supports CSS Modules using the [name].module.css file namingconvention

这是我的配置文件:

next.config.js

require('dotenv').config();
const lessToJS = require('less-vars-to-js')
const fs = require('fs')
const path = require('path');
const withSass = require('@zeit/next-sass');
const withLess = require('@zeit/next-less');
const withCSS = require('@zeit/next-css');
const withPlugins = require('next-compose-plugins');

// Where your antd-custom.less file lives
const themeVariables = lessToJS(fs.readFileSync(path.resolve(__dirname, './css/antd.less'), 'utf8'));

const nextConfig = {
    env: {
        spaceID: process.env.spaceID,
        accessTokenDelivery: process.env.accessTokenDelivery,
    },
    distDir: '.next',
};

const plugins = [
    withCSS,
    withLess({
        lessLoaderOptions: {
            javascriptEnabled: true,
            modifyVars: themeVariables,
        },
        webpack: (config, { isServer }) => {
            if (isServer) {
                const antStyles = /antd\/.*?\/style.*?/;
                const origExternals = [...config.externals];
                config.externals = [
                    (context, request, callback) => {
                        if (request.match(antStyles)) return callback();
                        if (typeof origExternals[0] === 'function') {
                            origExternals[0](context, request, callback);
                        } else {
                            callback();
                        }
                    },
                    ...(typeof origExternals[0] === 'function' ? [] : origExternals),
                ];

                config.module.rules.unshift({
                    test: antStyles,
                    use: 'null-loader',
                });
            }
            return config;
        },
    }),
    withSass,
];
module.exports = withPlugins(plugins, nextConfig);

页面/index.tsx :

import headerStyled from '../components/Header.module.css'

export default () => {
  return (
    <>
      <div className={headerStyled.appc}>
        Hello World
      </div>
    </>
  )
}

这是我在 github 上的测试项目(您可以克隆并查看这些配置)
https://github.com/thobn24h/nextjs-with-ant.git

当我运行 yarn dev 来构建项目时 --> 我得到了错误:

./components/Header.module.css 1:0
Module parse failed: Unexpected token (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
> .appc {
|   color: #fff;
|   background: #16191e;

这是我的依赖项:

 "dependencies": {
    "@zeit/next-css": "^1.0.1",
    "@zeit/next-less": "^1.0.1",
    "@zeit/next-sass": "^1.0.1",
    "antd": "^4.4.0",
    "dotenv": "^8.2.0",
    "less": "^3.11.3",
    "less-vars-to-js": "^1.3.0",
    "next": "^9.4.4",
    "next-compose-plugins": "^2.2.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "devDependencies": {
    "@types/node": "^14.0.14",
    "@types/react": "^16.9.41",
    "typescript": "^3.9.6"
  },

请告诉我如何更正此配置以运行带有 的 Next.js 项目 Ant 设计 支持&仍然支持 CSS 模块

谢谢!

Answer 1

谢谢 Sumit Sarkar (@sumitsarkar01) 帮助我配置了 next.config.js ,
现在，它工作正常!

const withLess = require('@zeit/next-less')
const lessToJS = require('less-vars-to-js')
const withPlugins = require('next-compose-plugins')

const fs = require('fs')
const path = require('path')

const dotenv = require('dotenv')

dotenv.config()

// Where your antd-custom.less file lives
const themeVariables = lessToJS(
  fs.readFileSync(path.resolve(__dirname, './css/antd.less'), 'utf8')
)

const plugins = [
  [withLess({
    lessLoaderOptions: {
      javascriptEnabled: true,
      modifyVars: themeVariables, // make your antd custom effective
    },
    webpack: (config, { isServer }) => {
      if (isServer) {
        const antStyles = /antd\/.*?\/style.*?/
        const origExternals = [...config.externals]
        config.externals = [
          (context, request, callback) => {
            if (request.match(antStyles)) return callback()
            if (typeof origExternals[0] === 'function') {
              origExternals[0](context, request, callback)
            } else {
              callback()
            }
          },
          ...(typeof origExternals[0] === 'function' ? [] : origExternals),
        ]

        config.module.rules.unshift({
          test: antStyles,
          use: 'null-loader',
        })
      }

      const builtInLoader = config.module.rules.find((rule) => {
        if (rule.oneOf) {
          return (
            rule.oneOf.find((deepRule) => {
              return deepRule.test && deepRule.test.toString().includes('/a^/');

            }) !== undefined
          );
        }
        return false;
      });

      if (typeof builtInLoader !== 'undefined') {
        config.module.rules.push({
          oneOf: [
            ...builtInLoader.oneOf.filter((rule) => {
              return (rule.test && rule.test.toString().includes('/a^/')) !== true;
            }),
          ],
        });
      }

      config.resolve.alias['@'] = path.resolve(__dirname);
      return config;
    }
  })]
]

const nextConfig = {
  env: {
  }
}

module.exports = withPlugins(plugins, nextConfig)

我已将此配置更新为我的测试项目，您可以查看
[https://github.com/thobn24h/nextjs-with-ant][1]