next.js与antd-mobile:定制主题和按需引入的报错和解决

关于定制主题和按需引入,antd-mobile官方文档给出了明确的方案,
在实际使用过程中遇到一些报错。这个文章记录了这些报错,以及一些解决方案。

关于按需加载,官方文档是 https://antd-mobile.gitee.io/docs/react/introduce-cn#%E6%8C%89%E9%9C%80%E5%8A%A0%E8%BD%BD
根据官方的建议新建.babelrc文件,添加如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
"presets": [
"next/babel"
],
"plugins": [
[
"import",
{
"libraryName": "antd-mobile",
"style": "css"
}
] // `style: true` 会加载 less 文件
]
}

重启项目,报错:

/Users/**/node_modules/_normalize.css@7.0.0@normalize.css/normalize.css:12
html {
^

SyntaxError: Unexpected token {

原因分析:在服务端,@zeit/next-css插件不会正确处理node_modules目录下的css文件。

解决方案:在服务端,针对antd-mobile相关的样式文件,用null-loader进行处理。

在next.config.js的webpack配置中添加如下代码,记得先手动安装null-loader

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
webpack(config, {isServer}) {
if (isServer) {
const antStyles = /antd-mobile\/.*?\/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
}

关于定制主题,官方文档为 https://antd-mobile.gitee.io/docs/react/customize-theme-cn
需要把上面的"style": "css"改为 "style": true
此外,官方提供的webpack修改方式不适合next.js,应该在next.config.js中的webpack新增以下配置:

1
2
3
4
5
6
7
config.module.rules.push({
test: /\.less$/,
use: [
'postcss-loader',
{ loader: 'less-loader', options: { modifyVars: theme, javascriptEnabled: true } }
],
})

优惠福利

江山父老能容我,不使人间造孽钱