< 关於 Next: 开始打地基| CSS的引入方式 >

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两者，搭配使用在专案中～