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

⚠️ 该方法只适合 nextjs10 版本！

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

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

{
    "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

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新增以下配置：

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