next.js学习笔记-css的引入_next.js的scss引入

学习目标：

css引入

---

学习内容：

next中
1、页面中如何引入css
2、组件中如何引入

---

学习产出：

css的引入（四种方法）

方法1：全局引入

在pages文件夹下新建_app.tsx文件（next中有一个app根组件，新建_app.tsx是在重写该文件）

//_app.tsx文件
import "../styles.scss"
export default ({Component, pageProps}) => (
  // Component代表动态组件，跟随访问地址不同而指向不同的组件
  <Component {...pageProps} />
)
1
2
3
4
5
6

方法2：模块引入

该方法的样式文件命名必须为xxx.module.scss

// pages中的页面文件
import styles from "./index.modules.scss"
const Index = () => {
   return (
       <>
         <h2 className={styles.xxxx}>pageIndex</h2>
       </>
   )
}
export default Index;
1
2
3
4
5
6
7
8
9
10

方法3：内联样式

// pages中的页面文件
import styles from "./index.modules.scss"
const Index = () => {
   return (
       <>
         <h2 className={styles.xxxx}>模块引入</h2>
         <h2 style={{color: 'green'}}>内联样式</h2>
       </>
   )
}
export default Index;
1
2
3
4
5
6
7
8
9
10
11

方法4：jsx方式

// pages中的页面文件
import styles from "./index.modules.scss"
const Index = () => {
   return (
       <>
         <h2 className={styles.xxxx}>模块引入</h2>
         <h2 style={{color: 'green'}}>内联样式</h2>
         <p>jsx方式</p>
         <style jsx>{`
            {
                p {
                    color: blue;
                }
            }
         `}</style>
          还有一种形式，可以设置全局样式
          <style global jsx>{`
            {
                body {
                    background: #000;
                }
            }
         `}</style>
       </>
   )
}
export default Index;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

sass

sass的引入和css方式一样。next.js允许您同时使用.scss和.sass扩展名导入sass。您可以通过css模块和.module.scss或module.sass扩展名使用组件级sass。前提是安装了sass

less