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

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

news 2025/10/31 19:17:49

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

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

编程新知 2025/10/30 10:46:36

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

编程新知 2025/10/30 10:46:50

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

编程新知 2025/10/29 12:53:31

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

编程新知 2025/9/17 19:16:20

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下： 重点代码分析： 启动相机前，先要通过getCameraIdList获取camera的个数以及id，然后可以通过getCameraCharacteristics获取对应id camera的capabilities（静态信息）进行一些openCamera前的…...

编程新知 2025/10/26 7:39:34

leetcodeSQL解题：3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

编程新知 2025/10/5 19:58:27

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

编程新知 2025/10/23 11:51:37

JS设计模式(4)：观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

编程新知 2025/9/1 6:48:07

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

编程新知 2025/10/25 21:14:56

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

编程新知 2025/10/30 16:48:41