09-17-2021

本章內容

• 添加樣式-全域樣式
• 添加樣式-模組化樣式
• 添加樣式-Sass
• 添加樣式-其他的框架

添加樣式-全域樣式

在Next.js 中是可以使用JavaScript 導入 CSS 使用的
我們可以將在全域會使用到的樣式都統整在一個CSS文件中
例如說：
style.css

body {
  font:16px;
  padding-top:1em
  max-width: 680px;
  margin: 0 auto;
}

在pages/_app.js中將style.cssimport進來使用
這樣就可以在全域中都使用到CSS的內容

import '../styles.css'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

添加樣式-模組化樣式

在Next.js 中也可以將樣式模組化，將檔案命名為:[name].module.css
模組會自動創建class名稱，反而不需要擔心撞名的問題！
而且可以在每個component中import 。
例如：
設定樣式

.info {
  color: white;
  background-color: green;
}

引入使用就可以直接以變數styles當作CSS的class名稱，.info則是在樣式內定義的class名稱

import styles from './Button.module.css'

export function Button() {
  return (
    <button
      type="button"

      className={styles.info}
    >
      Destroy
    </button>
  )
}

添加樣式-Sass

Next.js可以擴充使用Sass，但需要先將套件安裝起來

npm install sass

再來就需要自定義在Next.config.js內設定Sass編譯器
添加includePaths：

const path = require("path");
module.exports = {
    // reactStrictMode: true,
    sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
    },

添加樣式-其他的框架

目前還有許許多多常用的框架可以定義CSS，過後會在多介紹最近常用的
Chakra-UI、Styled-component兩者，搭配使用在專案中～