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了