邊學邊寫next.js-2 antd+scss

時間 2020-07-09

標籤 next.js antd+scss antd scss 欄目 JavaScript 简体版

原文原文鏈接

上次說到路由，如今就要開始寫頁面了！先來一波該系列javascript

react全家桶

antd一個UI框架，蠻好用的，可是在next裏該如何安裝呢。。。超級簡單，跟前端同樣css

npm install --save antd複製代碼

ok了，開始嘗試一下。前端

修改index.js以下java

import Link from 'next/link'
import Router from 'next/router'
import { Button } from 'antd'

function HomePage() {
  return <div> Welcome to Next.js! <Link href={{ pathname: '/about', query: { name: 'abc' }}}> <a>to about</a> </Link> <br/> <Button onClick={(e) => { Router.push({ pathname: '/about', query: { name: 'abc' }, }) }} >click</Button> </div>
}

export default HomePage複製代碼

進入首頁，node

我去，狀況不對啊。忘了，引入css了，這記性！
react

首頁加入import 'antd/dist/antd.css';webpack

保存，進入首... ，不用了，已經報錯了git

全局樣式只能經過pages下的_app.js引入。github

因此新建_app.js啊，可是應該寫什麼呢？這是個問題，到官網去看，確定有解釋。web

能夠看到_app的做用有幾個，最後一條就是咱們的需求。因此整起

刪除index.js裏的

import 'antd/dist/antd.css'; 複製代碼

pages文件夾下新建_app.js

import 'antd/dist/antd.css';

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}複製代碼

對了，第一次建立_app.js得重啓一下才會生效

，熟悉的按鈕回來了。

CSS-in-JS

還有一個點要說下，內聯css

修改about.js以下

import React from 'react'
import { withRouter } from 'next/router'
import Child from '../components/Child'

class About extends React.Component {
  render() {
    return (
      <div> <span>about page! name is : {this.props.router.query.name}</span> <h3>子組件</h3> <Child></Child> <style jsx>{` span { background: red; } `}</style> <style global jsx>{` b { background: orange; } `}</style> </div>

    )
  }
}

export default withRouter(About)複製代碼

上面global，代表不止在該組件生效，同時它的子組件也會生效

在根目錄下穿件components文件夾，進入裏面，新建child.js以下：

import React from 'react'

class Child extends React.Component {
  render() {
    return (
      <div>
      	<span>
	        Child page
	    </span>
	    <br/>
	    <b>
	    	strong
	    </b>
      </div>
    )
  }
}

export default Child複製代碼

scss

查看官網找到git上的next-sass，能夠這樣寫

npm install --save @zeit/next-sass node-sass複製代碼

而後建立next.config.js並寫入

// next.config.js
const withSass = require('@zeit/next-sass')
module.exports = withSass({
  /* config options here */
})複製代碼

以後根目錄建立styles文件夾，並進入建立style.scss寫入

$blue: blue;
div {
	color: $blue;}複製代碼

修改_app.js

_app.js
import 'antd/dist/antd.css';
import '../styles/style.scss';

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />; }複製代碼

修改about.js，並加入猜測，css-in-js是否可以使用到scss

import React from 'react'
import { withRouter } from 'next/router'
import Child from '../components/Child'
import Head from 'next/head'

class About extends React.Component {
  render() {
    return (
      <div>
        <Head>
          <link rel="stylesheet" href="../styles/style.scss"/>
        </Head>
        <div>
          <span>about page! name is : {this.props.router.query.name}</span>
          <h3>子組件</h3>
          <Child></Child>

          <style global jsx>{`
            b {
              background: orange;
              color: $red;
            }
          `}</style>
        </div>
      </div>

    )
  }
}

export default withRouter(About)複製代碼

只要修改過next.config.js，就得重啓一次，因此run一遍把

完。。。蛋玩意兒，有報錯了，antd的css報錯，無法了找一遍爲啥。

config裏寫的貌似有點苗頭可找，withSass難道是隻能解析scss？

git查看next-sass，我去第一句就是

。。。。。。因此看東西仍是得仔細，只能引入一個，這也太坑了吧。

不過，仍是找到了解決方案

npm install --save next-compose-plugins複製代碼

修改next.confit.js

// next.confit.js
const withSass = require('@zeit/next-sass')
const withCss = require('@zeit/next-css');
const withPlugins = require("next-compose-plugins");

module.exports = withPlugins([withSass,withCss], {
  webpack: (config) => {
    return config
  },
});複製代碼

重啓run

，文字顏色變了，可是child裏的strong沒有變成紅色，因此這種方式只適合scss文件使用。那若是想在內部使用又該怎麼辦呢？

進行babelrc配置

根目錄建立.babelrc文件有點啊，windows右鍵可能建立不了，能夠使用命令行

type null>.babelrc複製代碼

// 寫入一下內容
// .babelrc
{
  "presets": [
    [
      "next/babel",
      {
        "styled-jsx": {
          "plugins": [
            "styled-jsx-plugin-sass"
          ]
        }
      }
    ]
  ]
}複製代碼

修改about.js

// 以上省略
<style global jsx>{`
       $red: red;
            b {
              background: orange;
              color: $red;
            }
          `}</style>
// 如下省略複製代碼

看下效果

，紅了，沒問題。

因爲我的比較喜歡，一個模塊一個樣式，而不是一個大雜燴，因此以爲這樣寫樣式感受超級超級奇怪，就想有沒有其餘可行的方式。

而後就想到了一個簡單點的方式，把style抽出來，寫成一個js

把about裏的style全刪了

而後修改child.js

import React from 'react'
import Style from './child.style'

class Child extends React.Component {
  render() {
    return (
      <div>
      	<span>
	        Child page
	    </span>
	    <br/>
	    <b>
	    	strong
	    </b>
	    <Style></Style>
      </div>
    )
  }
}

export default Child複製代碼

在components裏新建child.style.js

// child.style.js
export default function () {
  return <style global jsx>{`
            $red: red;
            div {
              b {
                background: orange;
                color: $red;
              }
            }
          `}</style>
}複製代碼

，這樣是可行的。