Next.js踩坑入門系列（二）— 添加Antd && CSS

lifesimple 發布于2019-08-23 11:38 / 1351人閱讀

摘要：踩坑入門系列一二添加三目錄重構再談路由陸續更新個人對于腳手架的有一種執念，如果搭建出來就是一個首頁標簽跳轉，實在不是我這個處女座的風格，因此第二步我就想引用框架，相信很多使用的開發者用的也都是這個框架吧。

Next.js踩坑入門系列

(一) Hello Next.js

(二) 添加Antd && CSS

(三) 目錄重構&&再談路由

陸續更新...

個人對于腳手架的UI有一種執念，如果搭建出來就是一個首頁＋a標簽跳轉，實在不是我這個處女座的風格，因此第二步我就想引用UI框架 —— ant-design，相信很多使用react的開發者用的也都是這個UI框架吧。因為以前自己在配制的時候也經常采坑，所以還是在這里記錄一下~

安裝依賴

既然是安裝ant-design，那么這兩個東西肯定是不能少的，一個是antd另一個就是antd官方的按需加載babel插件babel-plugin-import。

// 安裝依賴
yarn add antd babel-plugin-import

因為現在開發環境大部分過渡到ES6/ES7語法了，因此還需要安裝一個babel的裝飾器轉化插件babel-plugin-transform-decorators-legacy，說實話這個插件具體是干啥的我還真沒太仔細看，不過裝上它在babel里配置就可以使用antd了。

當然還有其他方法，我這里只是使用了這一種方法~

// 根目錄新建.babelrc文件
{
  "presets": ["next/babel"],
  "plugins": [
    "transform-decorators-legacy",
    [
      "import",
      {
        "libraryName": "antd",
        "style": "css"
      }
    ]
  ]
}

配置好了，我們來試一試，yarn dev啟動項目，額，一大堆報錯，為啥呢？好像是服務端渲染的時候node端的問題吧，具體的我也不太清楚因為是入門有大神指導具體的可以留言教教小弟一下，不勝感激。反正查唄，因為原本在其他腳手架配置的時候需要在webpack里配置一些東西嘛，這個怎么可能沒有配置文件呢？
當然有了，只不過改名了，叫做next.config.js了，上網查了一下，官方的解決方案就是引入一下next-css這個包，然后require.extensions[".css"]，還是那句話，我不理解，以后再深入研究一下，目前目的是可用~但是配置方案查到了就在這里寫一下。

// 安裝依賴
yarn add @zeit/next-css

// 根目錄下創建next.config.js，內容如下

/* eslint-disable */
const withCss = require("@zeit/next-css");

// fix: prevents error when .css files are required by node
if (typeof require !== "undefined") {
  require.extensions[".css"] = (file) => {}
}

module.exports = withCss();

好了，現在我們在啟動，就沒有報錯了，畢竟是官方解決方案，還是好使~把首頁的a標簽換成antd的button試試效果,效果是下面這樣：

額，果然沒這么簡單，這又咋的了，也沒有任何報錯，也沒有任何提示，顯而易見就是樣式沒加載進來吧。。。繼續查，OK，明白了，其實antd的樣式已經有了，只不過在頁面上沒被引進來。為什么這么說呢？看下面兩幅圖：

可以看出來，第一個就是渲染出來的頁面head標簽里沒有任何的CSS樣式，第二個就是antd的樣式文件已經被打包放進.next文件夾的static文件夾里面了。
原因找到了，接下來就是解決問題了

Next.js Head組件

解決問題就是我們需要把那個style.css放到頁面里，但是我翻遍了整個工程目錄，都沒有找到正常React SPA的那個index.html，尷尬了，有問題還是得找官方文檔啊，查完過后發現了這個東西，Head，想看具體的可以點進去看官網，寫的挺詳細的~，就是我們可以使用這個head組件來為我們的頁面添加head信息。

// /pages/index.js
import React, { Fragment } from "react";
import { Button } from "antd";
import Link from "next/link";
import Head from "next/head";
const Home = () => (
  
    
      
      
      Next-Antd-Scafflod
      
    
    
      我是Next的首頁
      
        
      
    
  
);
export default Home;

OK,到現在而言是不是有點NB了，O(∩_∩)O哈哈~，真的是采坑系列啊，配置一個UI組件就這么麻煩。估計接下來有坑可踩啦！

抽離Head為Layout

一般的應用都會有個菜單Menu導航條之類的嘛，所以頁面就做頁面的事情，head放里面感覺怪怪的，還是按照習慣把Head抽離出來當成一個高級父組件吧。個人習慣，就新建了一個components文件夾，里面新建Layout.js。

// /components/Layout.js
import Head from "next/head";
export default ({ children }) => (
  
    
      
      
      Next-Antd-Scafflod
      
    
    
    {children}
  
);

// /pages/index.js
import React, { Fragment } from "react";
import { Button } from "antd";
import Link from "next/link";
import Layout from "../components/Layout";
const Home = () => (
  
    
      Hello Next.js
      
        
      
    
  
);
export default Home;

講到這里，整個Antd的配置基本就完成了吧，哈哈，沒想到講個antd配置能寫這么多，真實厲害了~既然UI框架嘛，順便我就把CSS也寫了吧。看Next官網可以很明確了解到它推崇的是css-in-js，具體鏈接大家請點這里Next Css-in-Js，說白了，可以把它理解成用類Vue的形式寫React，組件內部使用下面這種形式來修改樣式

這里需要注意的是，組件內部的css并不是子組件繼承父組件，就是組件內部使用，如果想要子組件繼承父組件樣式，需要將style jsx改成style global jsx這種形式，說實話，越看越像Vue，^_^
除了上面那種官方推薦的方法以外，還有其他很多種Css-in-Js的樣例，其中個人還是比較推薦styled-components的，大家感興趣可以去看官方文檔，寫的真的很不錯。

留坑

以前我在用antd的時候，都會根據重置一下自帶配色以及一些其他的默認屬性，這里我才用了以前的方式結果出錯了，以前的方式是依賴babel-plugin-import，在babelrc文件里將"style": "css"改成"style": true，這樣，babel-plugin-import會加載.less文件，然后在webpack里面配置less-loader的modifyVars變量進行覆蓋：

config.module.rules.push({
        test: /.less$/,
        use: [
          {
            loader: "style-loader"
          }, {
              loader: "css-loader"
          }, {
              loader: "less-loader",
              options: {
                sourceMap: true,
                modifyVars: AntdTheme
              }
          }
        ]
    })

但是在next框架里如果使用less方式引入服務端渲染會過不去，這算是一個坑？還是有解決辦法我沒查到，總之暫時這樣吧，改的話其實也可以改，用下面這種方式就好了，無關痛癢~

你看，也可以改，不過個人覺得antd的配色還是挺不錯的，哈哈，就別改了。我認為官方后續會增強的吧！

可能官方早就有解決方案了吧，只不過我還是不太會用？因為我看除了next-css包以外還提供了next-less包，這個包應該就是用來加載less文件的吧我看了一下這個包還支持css-modules，不過我配置了一下還是不太對，并且我對目前這種寫法還覺得挺舒服的，就不多浪費時間了，大家感興趣的可以攻克一下，解決了可以留言個地址給我，萬分感謝~

總結

第二篇寫完了，原本寫之前以為很簡單的兩下就完事了，沒想到中間踩了這么多坑，因為我是一邊搭項目一邊寫的，所以個人認為還是比較詳細的，非常適合新手。像我這么良心的寫手是不是很少了，哈哈。
代碼地址
下一篇：準備好好講講路由然后簡單的整理一下項目骨架為了接下來的redux做準備~

GPU云服務器云服務器 asp &amp&amp邏輯 js 2&amp&amp1 attr&039&039checked&039&039 OneTechCloud&amp

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97244.html

Next.js踩坑入門系列（一）— Hello Next.js!

摘要：接下來我們運行一下。因此，我們需要新建一個目錄。接下在再重新啟動一下試試。因為默認開啟服務端渲染，也就無需我們進行任何的配置，因此現在這個極其簡單的應用就是一個。代碼地址參考文章服務端渲染與打造高可靠與高性能的同構解決方案寫在前面說實話，我個人還是覺得文筆越來越不錯了，以前的文章都是一個問題悶到天黑，文章寫的有點亂由于文章過于龐大導致不是一氣呵成的，思路有時候會很混亂。所以我也準備...

rockswang 2019-08-23 11:38 評論0 收藏0
關于react+antd樣式不生效問題的解決方式

　　1、下面是添加antd組件樣式不生效代碼　　在入口文件中引入import'antd/dist/antd.css' 　　樣式生效，但是生成警告　　WARNINGin./node_modules/antd/dist/antd.css 　　Failedtoparsesourcemap:'webpack://antd/./components/time- 　　picker/s...

3403771864 2022-09-13 22:19 評論0 收藏0
React 版 V2EX 社區（ react &amp; react-router &amp; ax

摘要：目錄項目簡介在線演示截圖演示踩坑項目簡介項目使用進行開發項目兼容移動端使用代理并支持跨域另外還寫過一個版項目，以及聊天室，找工作，北京。目錄項目簡介在線演示截圖演示踩坑項目簡介（1/4）項目使用React、Reac-router、Axios、ANTD UI進行開發項目兼容移動端使用Nginx代理V2EX API并支持CORS跨域另外還寫過一個Vue版V2EX項...

VincentFF 2019-08-21 12:04 評論0 收藏0
antd-Form4.x一個頁面中多個表單處理

一、前言今天開發的時候，發現一個頁面的表單其實是兩個部分，其中一部分還在另一個頁面引用了。這就增加代碼量，所以優化下，為了重復使用這里的表單。如圖，需求就是將下面兩個表單拆開，可以重復使用，實際兩部分可能有很多表單，這里方便起見，只寫了三個。二、涉及到知識點react hooksantd 4.0(Form)Promise子父組件傳值和父組件調用子組件方法三、實現方法具體實現：我放在了Codesan...

社區管理員 2022-10-08 14:55 評論0 收藏0
前端資源系列（4）-前端學習資源分享&amp;前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0