当前位置： 首页 > news >正文

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

news 2026/3/27 7:40:11

不同于 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 文件的导入样式。

相关文章：

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

不同于 nuxt &#xff0c;next 的样式绝大部分都需要手动导入。 全局样式 使用 sass 先安装 npm i sass -D 。 我们可以定义一个 styles 文件&#xff0c;存放全局样式。 variables.scss $fs30: 30px;mixin border() {border: 1px solid red; }main.scss use ./variables …...

编程日记 2024/8/14 12:07:13

关于Docker的详细介绍

Docker是一个开源的应用容器引擎&#xff0c;它允许开发者将应用程序及其依赖项打包到一个可移植的容器中&#xff0c;然后发布到任何流行的Linux或Windows操作系统的机器上&#xff0c;实现虚拟化。以下是关于Docker的详细介绍&#xff1a; ### 一、Docker的定义 Docker是一…...

编程日记 2024/8/14 12:06:12

一台佳能G3811彩色喷墨打印机打印没颜色报5200的维修记录

一台佳能G3811彩色喷墨打印机，用户送修，称打印没有颜色，加电开机连电脑安驱动打印测试，确实没有颜色，于是清洗喷头结果打印机那个显示屏上 ，上来就报错P08,电脑提示5200； 话不多说，开始维修，仅记录当时的维修方法及步骤，其它未列出。。。 维修方法： 1、进维…...

编程日记 2024/8/14 12:05:11

【LeetCode】452.用最少数量的箭引发气球

能够找到问题的解法与把问题足够简化是天壤之别。比如我知道这题可以用贪心算法来解决&#xff0c;但是代码实现的过程中就走上了复杂的路&#xff0c;但是官方题解给的代码则相当简洁。这说明我思考的不够深入&#xff0c;导致化繁为简的能力不够强。 1. 题目 2. 分析 一道贪…...

编程日记 2024/8/14 12:03:08

网络安全流程规范文件解读（安全专业L1级）

技术能力项编号AQ-AQ-L1-02.01(安全维护作业计划执行能力) 课程目标&#xff1a; 通过学习课程&#xff0c;学员可以&#xff1a; 1.了解ZGYD网络安全流程规范 2.独立执行安全维护作业计划。 流程规范 一、《ZGYD远程接入安全管理办法》 二、《ZGYD网络运维账号口令管理办…...

编程日记 2024/8/14 12:01:06

Java、python、php版的邮件发送与过滤系统的设计与实现 （源码、调试、LW、开题、PPT）

&#x1f495;&#x1f495;作者&#xff1a;计算机源码社 &#x1f495;&#x1f495;个人简介&#xff1a;本人 八年开发经验&#xff0c;擅长Java、Python、PHP、.NET、Node.js、Android、微信小程序、爬虫、大数据、机器学习等&#xff0c;大家有这一块的问题可以一起交流&…...

编程日记 2024/8/14 12:00:03

st算法求RMP

st算法&#xff08;sparse_tabel&#xff09;可以在O(N log N)的预处理后实现O(1)的查询效率。 rmq&#xff1a;Range Maximum (Minimum) Query的缩写&#xff0c;顾名思义是用来求某个区间内的最大值或最小值&#xff0c;通常用在需要多次询问一些区间的最值得问题中。 #inc…...

编程日记 2024/8/14 11:59:01

零基础学习Redis(1) -- Redis简介

Redis是一个在内存中存储数据的一个中间组件&#xff0c;可用作数据库或数据缓存&#xff0c;通常在分布式系统中使用 &#xff08;不了解分布式&#xff1f; 点击传送&#xff09; 1. Redis特性 在内存中存储数据&#xff0c;通过键值对的方法存储key为string&#xff0c;v…...

编程日记 2024/8/14 11:58:00

安装MySQL数据库【后端 8】

安装MySQL数据库 MySQL是世界上最流行的开源关系型数据库管理系统&#xff08;RDBMS&#xff09;之一&#xff0c;广泛应用于Web应用程序开发中。无论你是初学者还是有一定经验的开发者&#xff0c;掌握MySQL的安装都是必不可少的技能。本文将指导你如何在不同的操作系统上安装…...

编程日记 2024/8/14 11:56:58

JAVA学习-练习试用Java实现“整数转换英文表示”

问题&#xff1a; 将非负整数 num 转换为其对应的英文表示。示例 1&#xff1a; 输入&#xff1a;num 123 输出&#xff1a;"One Hundred Twenty Three" 示例 2&#xff1a; 输入&#xff1a;num 12345 输出&#xff1a;"Twelve Thousand Three Hundred Fo…...

编程日记 2024/8/14 11:55:57

TPshop商城的保姆教程（Ubuntu）

1.上传TPSHOP源码 选择适合自己的版本下载 TPshop商城源文件下载链接&#xff1a; 百度网盘 请输入提取码 上传tpshop的源码包到特定目录/var/www/html 切换到/var/www/html 目录下 cd /var/www/html修改HTML目录下所有文件权限 chmod -R 777 * 2.打开网址配置 TPshop安…...

编程日记 2024/8/14 11:50:49

MySQL存储过程、触发器、视图

数据库中的存储过程、触发器和视图是三种常用的数据库对象&#xff0c;它们在管理数据、优化性能和简化复杂操作中起着重要的作用。下面是每种对象的详细介绍和示例&#xff1a; 存储过程 存储过程是一组为了执行特定功能而预编译的SQL语句。它类似于编程中的函数&#xff0c…...

编程日记 2024/8/14 11:49:47

每一行txt文件的内容将作为CSV文件中的一行，逗号、空格和句号，冒号作为分隔符拆分成多列

将指定文件夹中的每个txt文件的内容读取出来&#xff0c;并将每个文件的内容按逗号、空格和句号作为分隔符拆分成多列&#xff0c;每一行txt文件的内容将作为CSV文件中的一行&#xff0c;此文件夹中的文件会有非utf-8字符&#xff0c;是如下的代码&#xff0c;如果是utf-8编码的…...

编程日记 2024/8/14 11:48:45

基于inotif的文件同步备份

1 ftp 因为服务器是linux的&#xff0c;而备份服务器是windows server的&#xff0c;故而采取lftp进行同步文件。 1.1 全量同步 cat > /appdata/script/sync_all.sh <<EOF #!/bin/bash # FTP 服务器信息 FTP_SERVER"ftp://192.168.0.5" FTP_USER"…...

编程日记 2024/8/14 11:45:42

luckyexcel 编辑预览excel文件

luckyexcel 编辑预览excel文件 支持后端传文件流预览编辑&#xff0c;也支持选择本地文件编辑预览 看效果 上代码 <template><div style"margin: 30px"><div class"button-box2"><div><div style"color: red">…...

编程日记 2024/8/14 11:41:37

记录Java使用websocket

实现场景&#xff1a;每在小程序中添加一条数据时&#xff0c;后台将主动推送一个标记给PC端&#xff0c;PC端接收到标记将进行自动播放音频。 import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import or…...

编程日记 2024/8/14 11:40:36

（javaweb）分层解耦

目录 一.三层架构 二.分层解耦 三.IOC&DI入门 四.IOC详解 五. DI详解 一.三层架构 复用性差&#xff0c;难以维护和管理 前端发起请求&#xff0c;先会到达controller&#xff0c;再调用service进行逻辑处理&#xff0c;逻辑处理的前提是先拿到数据&#xff0c;到dao…...

编程日记 2024/8/14 11:38:34

2024华为数通HCIP-datacom最新题库（H12-831变题更新⑨）

请注意&#xff0c;华为HCIP-Datacom考试831已变题 请注意&#xff0c;华为HCIP-Datacom考试831已变题 请注意&#xff0c;华为HCIP-Datacom考试831已变题 近期打算考HCIP的朋友注意了&#xff0c;如果你准备去考试&#xff0c;还是用的之前的题库&#xff0c;切记暂缓。 如…...

编程日记 2024/8/14 11:37:33

PCIe学习笔记（21）

读请求的数据返回&#xff08;Data Return for Read Requests&#xff09; •针对内存读取请求的单个完成可能提供少于请求的全部数据量&#xff0c;只要对于给定请求的所有完成在组合起来时返回了读取请求中请求的数据量。 ◦不同请求的完成不能合并。 ◦I/O和Configuratio…...

编程日记 2024/8/14 11:36:31

分享Embedding 模型微调的实现

写在前面 \1. 当前比较主流的Embedding开源模型有哪些&#xff1f; 答&#xff1a;1. m3e(Moka Massive Mixed Embedding) 2. BAAI/bge-large-zh-v1.5。更多的开源模型评测榜单可见&#xff1a; https://huggingface.co/spaces/mteb/leaderboard \2. 模型的作用&#xff1f; …...

编程日记 2024/8/14 11:32:27

用TurtleBot3实测：Navigation2局部代价地图的滚动窗口为何必须用odom坐标系？

TurtleBot3实测&#xff1a;为什么Navigation2局部代价地图必须绑定odom坐标系&#xff1f; 当你在Gazebo中第一次看到TurtleBot3的导航表现时&#xff0c;可能会对局部代价地图&#xff08;Local Costmap&#xff09;的坐标系选择产生疑问。为什么这个实时更新的避障地图要绑定…...

编程新知 2026/3/27 7:36:14

UE4SS虚幻引擎Mod开发工具：从技术痛点到生态共建的完整指南

UE4SS虚幻引擎Mod开发工具&#xff1a;从技术痛点到生态共建的完整指南 【免费下载链接】RE-UE4SS Injectable LUA scripting system, SDK generator, live property editor and other dumping utilities for UE4/5 games 项目地址: https://gitcode.com/gh_mirrors/re/RE-UE…...

编程新知 2026/3/27 7:14:12

Llama-3.2V-11B-cot部署教程：bf16+auto device_map双卡4090显存优化详解

Llama-3.2V-11B-cot部署教程&#xff1a;bf16auto device_map双卡4090显存优化详解 1. 项目概述 Llama-3.2V-11B-cot是基于Meta Llama-3.2V-11B-cot多模态大模型开发的高性能视觉推理工具&#xff0c;专为双卡4090环境深度优化。本教程将详细介绍如何快速部署这一专业级解决方…...

编程新知 2026/3/27 6:55:23

MPC模型下四节电池SOC均衡控制技术：全网首发的效果超群解决方案

MPC模型预测控制四节电池SOC均衡 [1]全网首发电池SOC均衡控制&#xff0c;当前领域国内期刊罕有有人发。 [2]效果超群&#xff0c;根据电池均衡路径完美规划均衡电流&#xff0c;电流由大到小&#xff0c;避免均衡后期均衡路径问题。电池均衡这玩意儿听着高大上&#xff0c;说白…...

编程新知 2026/3/27 6:41:18

AutoDock Vina特殊金属元素对接技术指南：从问题诊断到方案落地

AutoDock Vina特殊金属元素对接技术指南&#xff1a;从问题诊断到方案落地 【免费下载链接】AutoDock-Vina AutoDock Vina 项目地址: https://gitcode.com/gh_mirrors/au/AutoDock-Vina 问题溯源&#xff1a;金属元素对接的技术瓶颈 在分子对接实践中&#xff0c;科研人…...

编程新知 2026/3/27 5:50:59

OpenClaw技能市场指南：Qwen3.5-4B-Claude适配的20个实用模块

OpenClaw技能市场指南&#xff1a;Qwen3.5-4B-Claude适配的20个实用模块 1. 为什么需要关注技能市场&#xff1f; 第一次接触OpenClaw时&#xff0c;我以为它只是个能执行简单命令的自动化工具。直到在ClawHub技能市场里发现"会议纪要生成器"模块&#xff0c;才意识…...

编程新知 2026/3/27 4:23:50

用户缓冲区与内核缓冲区原理及应用解析

1. 用户缓冲区与内核缓冲区深度解析1.1 系统架构概述现代计算机系统采用分层架构设计&#xff0c;将运行环境划分为用户空间和内核空间两个关键区域。这种划分基于处理器提供的不同执行权限级别&#xff1a;用户空间&#xff1a;运行所有用户进程&#xff0c;包括应用程序、服务…...

编程新知 2026/3/27 3:59:38

实战指南：用快马为django项目生成定制化vmware开发环境，开箱即用

实战指南&#xff1a;用快马为Django项目生成定制化VMware开发环境&#xff0c;开箱即用 在实际开发场景中&#xff0c;虚拟机环境需要与具体项目需求紧密结合。最近我在做一个Django项目时&#xff0c;发现每次换电脑或重装系统都要重新配置开发环境&#xff0c;特别浪费时间…...

编程新知 2026/3/27 2:46:46

英雄联盟智能工具League Akari：提升游戏体验的终极指南

英雄联盟智能工具League Akari&#xff1a;提升游戏体验的终极指南 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit League Akari是…...

编程新知 2026/3/27 2:22:42

为什么你的Flask农业API总在灌溉高峰期崩？Python高并发部署的4层熔断架构设计（实测QPS提升6.8倍）

第一章&#xff1a;为什么你的Flask农业API总在灌溉高峰期崩&#xff1f;Python高并发部署的4层熔断架构设计&#xff08;实测QPS提升6.8倍&#xff09; 当全省智能灌溉系统在每日清晨5:00–7:00集中调度水阀、上传土壤墒情数据时&#xff0c;基于默认配置的Flask API常出现进程…...

编程新知 2026/3/27 1:30:20