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

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

news 2026/5/12 3:03:09

不同于 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

Neovim涂抹光标插件：提升编码体验的动态轨迹设计

1. 项目概述&#xff1a;一个为Neovim设计的“涂抹光标”插件 如果你和我一样&#xff0c;是个重度Neovim用户&#xff0c;每天有超过8小时的时间泡在终端和代码编辑器里&#xff0c;那你肯定对光标的“存在感”有要求。默认的方块或下划线光标&#xff0c;在长时间编码后&…...

编程新知 2026/5/12 1:54:35

基于Vue 3与Express的私有化ChatGPT Web客户端部署指南

1. 项目概述与核心价值最近在折腾一个自用的AI对话工具&#xff0c;核心需求很简单&#xff1a;想在一个自己完全掌控的界面上&#xff0c;方便地使用大语言模型&#xff0c;比如ChatGPT的API。市面上虽然有很多现成的网页应用&#xff0c;但要么功能太臃肿&#xff0c;要么部署…...

编程新知 2026/5/12 1:37:51

给 Agent 用的搜索：Cloudflare AI Search 是什么，怎么工作的

原文&#xff1a;AI Search: the search primitive for your agents 发布时间&#xff1a;2026 年 4 月 16 日 作者&#xff1a;Gabriel Massadas、Miguel Cardoso、Anni Wang 每个 Agent 都需要搜索&#xff0c;但自己搭很麻烦 编码 Agent 要检索数百万个文件&#xff0c;客服…...

编程新知 2026/5/12 1:35:50

Prometheus 自定义指标监控：Python Exporter 编写与业务指标告警配置

前言 Prometheus 监控系统指标&#xff08;CPU、内存、磁盘&#xff09;这件事很多人熟悉&#xff0c;但不少开发者有个共同疑问&#xff1a;业务特有的指标——比如队列积压数、订单待处理量、API 调用成功率——Prometheus 能监控吗&#xff1f; 答案是&#xff1a;完全可以…...

编程新知 2026/5/11 22:45:36

Tabletop Simulator备份神器：3分钟学会永久保存你的桌游资产

Tabletop Simulator备份神器&#xff1a;3分钟学会永久保存你的桌游资产 【免费下载链接】tts-backup Backup Tabletop Simulator saves and assets into comprehensive Zip files. 项目地址: https://gitcode.com/gh_mirrors/tt/tts-backup 还在担心辛苦创建的Tabletop…...

编程新知 2026/5/11 22:29:11

从理论到落地，一文读懂现代AI Agent的完整记忆流水线

来源&#xff1a;DeepHub IMBA 本文约6500字&#xff0c;建议阅读13分钟本文介绍 AI Agent 四大记忆分类与流水线&#xff0c;解析生产架构、选型方案及常见落地误区。每一次 LLM 调用都是无状态的。模型读上下文窗口&#xff0c;生成响应然后忘掉一切。这对单轮问答没问题。对…...

编程新知 2026/5/11 22:16:37

手把手教你用RecFusion和3D Scan：Kinect v2与RealSense D435三维重建完整流程与软件配置

手把手教你用RecFusion和3D Scan&#xff1a;Kinect v2与RealSense D435三维重建完整流程与软件配置 刚拿到Kinect v2或RealSense D435时&#xff0c;许多开发者最迫切的需求不是理解原理&#xff0c;而是快速完成第一次三维扫描。本文将用最简明的操作流&#xff0c;带你在30分…...

编程新知 2026/5/11 22:01:11

从HIP4082到IR2184：直流电机H桥驱动芯片怎么选？一份给硬件工程师的对比清单（含成本、功耗、设计复杂度）

从HIP4082到IR2184&#xff1a;直流电机H桥驱动芯片的工程选型指南 在小型机器人、电动工具或自动化设备的开发中&#xff0c;电机驱动电路的设计往往是硬件工程师面临的核心挑战之一。面对市场上琳琅满目的驱动芯片&#xff0c;如何在性能、成本和可靠性之间找到最佳平衡点&am…...

编程新知 2026/5/11 20:29:09

CANN/asc-devkit SPM缓冲区写入API

WriteSpmBuffer 【免费下载链接】asc-devkit 本项目是CANN 推出的昇腾AI处理器专用的算子程序开发语言&#xff0c;原生支持C和C标准规范&#xff0c;主要由类库和语言扩展层构成&#xff0c;提供多层级API&#xff0c;满足多维场景算子开发诉求。 项目地址: https://gitcode…...

编程新知 2026/5/11 18:32:26

从IR2184到全桥驱动：搞懂H桥电路防短路与死区设置（附电路图分析）

从IR2184到全桥驱动&#xff1a;H桥电路防短路与死区设置的工程实践 在电机控制系统中&#xff0c;H桥电路的设计可靠性直接决定了整个驱动方案的成败。许多工程师在初次设计基于IR2184的全桥驱动时&#xff0c;往往会被"上下桥臂直通"问题困扰——这种短路状态能在微…...

编程新知 2026/5/11 17:06:53