⚠️ 该方法只适合 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文件,添加如下代码
1 | { |
重启项目,报错:
/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 | webpack(config, {isServer}) { |
关于定制主题,官方文档为 https://antd-mobile.gitee.io/docs/react/customize-theme-cn
需要把上面的"style": "css"
改为 "style": true
。
此外,官方提供的webpack修改方式不适合next.js,应该在next.config.js中的webpack新增以下配置:
1 | config.module.rules.push({ |