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

问题描述

我正在使用 Ant Design 构建一个基于 SSR(使用 Next.js)的 ReactJs 项目.但是在我自定义 next.config.js 配置以支持 Ant Design 之后，我无法使用 CSS 模块 功能.

I'm building a ReactJs project base on SSR ( using Next.js ) with Ant Design. But after I customize next.config.js config for support Ant Design, I can't use CSS Module feature.

Next.js 支持使用 [name].module.css 文件命名的 CSS 模块约定

这是我的配置文件:

1. 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);

1. pages/index.tsx:

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

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

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

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

When I run yarn dev to build project --> I got error:

./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;

1. 这是我的依赖项:
   

 "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"
  },

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

Please show me how to correct this configurations to run Next.js project with Ant Design support & still support CSS Modules

推荐答案

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

Thank you Sumit Sarkar (@sumitsarkar01) was helped me config the next.config.js,
And now, It work correctly!

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)

这篇关于如何在 Next.js 中使用自定义主题和配置 Ant Design支持 CSS 模块功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！