next使用antd
2018-12-05 本文已影响11人
月肃生
正常使用是没有问题的，但是样式加载不了，试了很久，antd的按需加载根本没用，可能配置有问题。最后只有两种简单的实现方法。
1. head中引入 antd.css
在pages目录中新建文件_document.js
/**
* 2018-12-04
* author: 李坤
*/
import React from 'react'
import Document, { Head, Main, NextScript } from 'next/document'
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<html>
<Head>
<style>{`body { margin: 0 } /* custom! */`}</style>
<link href="/static/antd.css" rel="stylesheet" /> {/* 地址是自己下载的antd.css，当然也可以使用cdn的地址 */}
</Head>
<body className="custom_class">
<Main />
<NextScript />
</body>
</html>
)
}
}
2. 在less中import
在自己写的less文件中@import
@import "~antd/dist/antd.less";
next.config.js
const withLess = require("@zeit/next-less")
module.exports = withLess({
cssModules: false,
cssLoaderOptions: {
importLoaders: 1,
localIdentName: '[local]--[hash:base64:5]'
},
webpack(config, { dev }) {
return config;
}
})
优缺点对比
- 第一种方式
1）antd.css的版本必须和当前的antd版本一致，不然可能会出问题，建议锁定antd版本。 - 第二种方式
1）可以通过覆盖样式更换主题，(modifyVars不起作用，不太清楚withLess的实现)
2）不能使用css模块化，因为@import的文件也会被模块化，会出问题。
3）版本问题不需要考虑
