【Next】全局样式和局部样式

秀秀_heo

已于 2024-08-13 17:01:46 修改

阅读量401

点赞数 2

分类专栏： React 及其周边生态文章标签： javascript 前端 ecmascript

于 2024-08-11 17:08:59 首次发布

本文链接：https://blog.csdn.net/XiugongHao/article/details/141107921

版权

React 及其周边生态专栏收录该内容

49 篇文章 0 订阅

订阅专栏

不同于 nuxt ，next 的样式绝大部分都需要手动导入。

全局样式

使用 sass 先安装 npm i sass -D 。

我们可以定义一个 styles 文件，存放全局样式。

在这里插入图片描述

variables.scss

$fs30: 30px;

@mixin border() {
  border: 1px solid red;
}

main.scss

@use './variables' as *;

$fsColor: lightgreen;
.global-style {
    color: $fsColor;
    @include border();
}

globals.css

.global-border {
   border: 1px solid black;
}

import MyButton from "@/components/my-button";
import Head from "next/head";
import '../styles/globals.css'
import '@/styles/main.scss'

export default function Home() {

    return (
        <>
            <Head>
                <title>我是title</title>
                <meta name="description" content="Generated by create next app"/>
                <meta name="viewport" content="width=device-width, initial-scale=1"/>
                <link rel="icon" href="/favicon.ico"/>
            </Head>
            <div className="global-style">Welcome to my website! 你好</div>
            <MyButton/>
        </>
    );
}

局部样式

可以定义一个该文件夹下的 xxx.module.css 文件：

.about-color {
    color: hotpink;
}

import React from 'react';
import Link from "next/link";
import styles from './page.module.css'

function Page(props) {
    return (
        <>
        <div className={styles['about-color']}>我是about页</div>
            <Link href="/"> go to home</Link>
        </>
    );
}

export default Page;

同时支持从CSS module 文件导出（export）的 Sass 变量。

app/variables.module.scss

$primary-color: #64ff00;
 
:export {
  primaryColor: $primary-color;
}

app/page.jsx

import variables from './variables.module.scss'
 
export default function Page() {
  return <h1 style={{ color: variables.primaryColor }}>Hello, Next.js!</h1>
}

所以从上面我们可以看出，当添加了 module 后缀的 css 将被模块化，可以直接以一个变量 styles 的形式导入使用，否则只能使用常规的导入 css 文件的导入样式。