学习目标:
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} />
)
方法2:模块引入
该方法的样式文件命名必须为xxx.module.scss
// pages中的页面文件
import styles from "./index.modules.scss"
const Index = () => {
return (
<>
<h2 className={styles.xxxx}>pageIndex</h2>
</>
)
}
export default Index;
方法3:内联样式
// pages中的页面文件
import styles from "./index.modules.scss"
const Index = () => {
return (
<>
<h2 className={styles.xxxx}>模块引入</h2>
<h2 style={{color: 'green'}}>内联样式</h2>
</>
)
}
export default Index;
方法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;
sass
sass的引入和css方式一样。next.js允许您同时使用.scss和.sass扩展名导入sass。您可以通过css模块和.module.scss或module.sass扩展名使用组件级sass。前提是安装了sass