项目开发中, 大多数团队都会选择使用开源的 UI 库, 那么在 next.js 中要引入第三方库. 我们需要进行相应的配置. 在 css 预处理器上, 目前团队使用 scss . 个人觉得非常好用. 如果要使用 scss 我们必须要做简单配置, 否则是无法使用的
配置下载
# npm
npm install css-loader node-sass @zeit/next-css @zeit/next-sass --save
# yarn
yarn add css-loader node-sass @zeit/next-css @zeit/next-sass
在根目录下创建 next.config.js
const withCSS = require('@zeit/next-css');
const withSass = require('@zeit/next-sass');
module.exports = () => withSass(withCSS())
引入 antd
# npm
npm install antd --sava
# yarn
yarn add antd
引入 babel
# npm
npm install babel-plugin-import --save
# yarn
yarn add babel-plugin-import
在根目录创建 .babelrc
{
"presets":["next/babel"],
"plugins":[
[
"import",
{
"libraryName":"antd"
}
]
]
}
接下来就可以开心的使用 antd 和 scss了