如何在Next中配置Ant设计.js具有自定义主题并支持CSS模块功能

Question

我正在使用Ant Design在SSR(使用Next.js(上构建一个ReactJs项目。但是在我自定义next.config.js配置以支持 Ant Design 后，我无法使用CSS Modulefeature.

下一页.js 支持使用[name].module的 CSS 模块.css 文件命名 公约

这是我的配置文件：

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

2. pages/index.tsx：

import headerStyled from '../components/Header.module.css'
export default () => {
return (
<>
<div className={headerStyled.appc}>
Hello World
</div>
</>
)
}

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

4. 当我运行 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;

5. 这是我的依赖关系：
   

"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 Design的项目，并且仍然支持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]