next.js使用 antd, 支持 css 和 scss

项目开发中, 大多数团队都会选择使用开源的 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())

广州包装设计公司http://www.maiqicn.com 电脑刺绣绣花厂 ttp://www.szhdn.com

引入 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了