(03)vite 处理 css

news/2024/4/17 10:30:28

文章目录

    • 系列全集
    • vite 处理css流程
    • vite如何解决协同开发,样式重复覆盖的问题?
    • 使用less
    • 通过配置,更改vite的css默认行为

在这里插入图片描述

系列全集

(01)vite 从启动服务器开始
(02)vite环境变量配置
(03)vite 处理 css

vite 处理css流程

vite 天生就支持对css文件的处理,主要的处理流程如下。

  1. vite读取到main.js中引用到了index.css
  2. 通过fs模块去读取index.css文件的内容
  3. 直接创建一个style标签,将index.css中的文件内容直接copy进style标签中
  4. 将style标签插入到index.html的head中
  5. 将该css文件中的内容直接替换为hs脚本(方便热更新或者css模块化)

创建一个index.css文件

* {padding: 0;margin: 0;box-sizing: border-box;
}

将其引入main.js中

import { count } from "./counter.js";
import "./index.css"console.log(count);

启动vite服务器

yarn dev 或者yarn vite

将css的内容注入style标签,放置到head标签里
在这里插入图片描述

原本index.css的文件被替换了
在这里插入图片描述

vite如何解决协同开发,样式重复覆盖的问题?

使用css module css模块化

  1. css模块化是 以 module.css 结尾的文件,这是css开启模块化的标志。
  2. xxx.module.css里面所有的样式名称进行一定规则的替换(增加hash字符串,比如footer 替换为 _footer_123st)
  3. 同时创建一个映射对象 {footer: '_footer_123st'}
  4. 将替换后的内容塞进style标签里然后放入head标签中。
  5. 将原本的xxx.module.css内容全部抹除,替换成对应js脚本。
  6. 将创建的映射对象在脚本中默认导出

分别创建 一下文件
在这里插入图片描述

componentA index.module.css 配置

.footer {width: 100vw;height: 300px;background-color: aquamarine;
}

componentB index.module.css 配置

.footer {width: 100vw;height: 300px;background-color: yellowgreen;
}

componentA index.js

import componentAcss from "./index.module.css"const div = document.createElement("div");div.className = componentAcss.footer;document.body.appendChild(div)

componentB index.js

import componentBcss from  "./index.module.css"const div = document.createElement("div");div.className = componentBcss.footer;document.body.appendChild(div)

在main.js中全部引入

import "./index.css"
import "./index.less"
import './src/componentA/index.js'
import './src/componentB/index.js'

启动服务器之后,发现css module的类名都被替换了,加了hash
在这里插入图片描述

在这里插入图片描述

使用less

有的时候我们需要使用css预编译器,比如less

创建index.less文件

body {background-color: yellow;
}

在main.js中引入

import { count } from "./counter.js";
import "./index.css"
import "./index.less"
console.log(count);

启动vite服务器后,报错
在这里插入图片描述
提示我们需要安装less依赖,less属于开发依赖,

yarn add -D less 或者 npm install less -D

重启服务器后就能正常解析less了
在这里插入图片描述

通过配置,更改vite的css默认行为

import { defineConfig } from "vite";export default defineConfig({css: {// 会丢给postcss module 去配置  https://github.com/madyankin/postcss-modulesmodules: { // 只针对模块化的样式scopeBehaviour: "local", // 配置当前的css样式的行为是local模块化,还是global全局化,有hash就是开启模块化,因为它可以保证不同的模块相同类名不重复。// generateScopedName: "[name]__[local]___[hash:base64:5]", // 自定义生成名字的规则 更多配置 https://github.com/webpack/loader-utils#interpolatenamegenerateScopedName:(name,filename,css) => {// name css文件的类名// filename 当前css的绝对路径// css 当前给定的样式return `${name}_${Math.random() * 100}`},localsConvention: "camelCaseOnly", // 修改生成的配置对象的展示形式,驼峰/划线/中划线形式hashPrefix: "", // 补充的hash前缀,会参与到生成的类名中globalModulePaths: [""] // 导入了第三方样式时,或某些不希望module.css模块化hash时,使用这个globalModulePaths,填入css模块化的路径。},preprocessorOptions: {// 预处理的配置less: { // 更多less全局配置 https://less.bootcss.com/usage/#lessjs-optionsmath: "always",globalVars: { // 配置less的全局变量,greenColor: "#008000",}}},devSourcemap: true // 开发中能够快速找到某样式对应的样式文件}
});

css开启 devSourcemap 后,能够快速找到每一个样式对应的文件名,但最好只在开发环境中使用,

在这里插入图片描述
不开启devSourcemap 时,一般是上生产环境,默认情况下也是不开启的。

在这里插入图片描述

在这里插入图片描述


http://www.ppmy.cn/news/1256823.html

相关文章

Vue2.0与Vue3.0的区别

一、Vue2和Vue3的数据双向绑定原理发生了改变 Vue2的双向数据绑定是利用ES5的一个API,Object.definePropert()对数据进行劫持 结合 发布 订阅模式的方式来实现的。通过Object.defineProperty来劫持数据的setter,getter,在数据变动时发布消息…

【网络奇缘】- 计算机网络|分层结构|深入探索TCP/IP模型|5层参考模型

​ 🌈个人主页: Aileen_0v0🔥系列专栏: 一见倾心,再见倾城 --- 计算机网络~💫个人格言:"没有罗马,那就自己创造罗马~" 目录 OSI参考模型与TCP/IP参考模型相同点 OSI参考模型与TCP/IP参考模型不同点 面向连接三阶段&#xff08…

黑猫带你学eMMC协议第31篇:什么是eMMC的驱动强度(Drive Strength)

本文依据eMMC JEDEC5.1及个人工作经验整理而成,如有错误请留言。 文章为个人辛苦整理,付费内容,已加入原创侵权保护,禁止私自转载。 文章所在专栏:《黑猫带你学:eMMC协议详解》 1 简介 首先要清楚: 内阻越大,驱动强度越小;内阻越小,驱动强度越大。 ECSD[185]可调节…

测试:测试设计

一、数据组合测试设计 数据组合测试设计(Combinatorial Test Design,CTD)是一种优化测试用例的方法,它通过系统地组合不同的测试数据输入,以确保全面覆盖各种可能的测试情况。这种方法主要应用于软件测试领域&#xf…

flask之文件上传

1、创建表单提交页面&#xff0c;如&#xff1a;upload.html <html> <head><title>File Upload</title> </head> <body><form action"http://localhost:8888/uploadfile" method"POST" enctype"multipart/fo…

【C语言】扫雷小游戏初学者版

成功的秘诀就是每天都比别人多努力一点。 今天给大家带来一款非常经典的小游戏——扫雷的实现和讲解 这里是目录 前言整体框架1.打印菜单2.创建二维数组3.初始化棋盘4.打印棋盘5.布置棋盘中的雷6.排查雷和统计雷总体代码test.cgame.cgame.h 进阶&#xff08;递归展开&#xff0…

C语言--每日选择题--Day35

第一题 1. 有如下定义&#xff1a;(x y) % 2 (int) a / (int) b 的值是&#xff08;&#xff09; int x 3; int y 2;float a 2.5; float b 3.5; A&#xff1a;0 B&#xff1a;2 C&#xff1a;1.5 D&#xff1a;1 答案及解析 D 本题是考查强制类型转换和操作符优先级 操作…

网络初识:局域网广域网网络通信基础

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、局域网LAN是什么&#xff1f;二、广域网是什么&#xff1a;三. IP地址四.端口号五.认识协议5.1五元组 总结 前言 一、局域网LAN是什么&#xff1f; 局域网…

pdfjs,pdf懒加载

PDF.js是一个使用JavaScript实现的PDF阅读器&#xff0c;它可以在Web浏览器中显示PDF文档。PDF.js支持懒加载&#xff0c;也就是说&#xff0c;它可以在用户滚动页面时才加载PDF文档的某些部分&#xff0c;从而减少初始加载时间和内存占用。 注意点&#xff1a;如果要运行在多留…

数据库表的管理

表的基本概念 表是包含数据库中所有数据的数据库对象。数据在表中的组织方式与在电子表格中相似&#xff0c;都是 按行和列的格式组织的。每行代表一条唯一的记录&#xff0c;每列代表记录中的一个字段。例如&#xff0c;在包含公 司员工信息的表中&#xff0c;每行代表一名员工…

Java 多线程之 CyclicBarrier(并行任务/数据加载/同步辅助类)

文章目录 一、概述二、使用方法三、测试示例1四、测试示例2 一、概述 CyclicBarrier&#xff08;循环屏障&#xff09;是Java并发编程中的一种同步辅助工具。它允许一组线程相互等待&#xff0c;直到所有线程都到达一个共同的屏障点&#xff0c;然后继续执行后续操作。CyclicBa…

常见场景题-幂等性该如何设计?

幂等性如何设计&#xff1f; 答&#xff1a;幂等性的设计有以下几种方案&#xff1a; 方案一&#xff1a;唯一索引或唯一组合索引 对订单的幂等性设计&#xff0c;可以使用订单号作为唯一索引&#xff0c;这样如果多次插入的话&#xff0c;就会报错 DuplicatedKeyException…

10、SQL注入——数据库基础

文章目录 一、数据库概述二、数据库分类Mysql数据库连接方法 三、识别数据库四、SQL语法4.1 SQL基本语法4.2 高级操作 一、数据库概述 数据库&#xff08;database&#xff09;&#xff1a;存储在磁盘、磁带、光盘或其他外存介质上、按一定结构组织在一起的相关数据的集合。数…

AI代码助手:写代码“如虎添翼”

当你还在头疼如何写好代码&#xff0c;如何更好的快速完成项目时&#xff0c; 这些工具能自动为你编写代码或提供替代的解决方案&#xff1a; 1.Cursor Cursor&#xff0c;一个看上去平平无奇的IDE&#xff0c;但它可以直接调用GPT-4来帮你生成代码。作者Aman Sanger说他们是…

计算机网络(二)| 物理层上 | 数据通信基础知识 调制 频率范围 信噪比

文章目录 1 物理层基本概念2.数据通信基础知识2.1 数据通信基本概念2.2 信道基本概念2.2.1 基带调制&#xff08;编码&#xff09;方式2.2.2 带通调制方式 2.3 信道的极限速率影响因素2.3.1 **频率范围**2.3.2 **信噪比** 内容笔记来源于谢希任老师《计算机网络》 物理层重点 …

血的教训---入侵redis并免密登录redis所在服务器漏洞复现

血的教训—入侵redis并免密登录redis所在服务器漏洞复现 今天就跟着我一起来入侵redis并免密登录redis所在服务器吧&#xff0c;废话不多说&#xff0c;我们直接开始吧。 这是一个体系的学习步骤&#xff0c;当然如果基础扎实的话可以继续往下面看 以下都是关联的文章&#xff…

中英双语大模型ChatGLM论文阅读笔记

论文传送门&#xff1a; [1] GLM: General Language Model Pretraining with Autoregressive Blank Infilling [2] Glm-130b: An open bilingual pre-trained model Github链接&#xff1a; THUDM/ChatGLM-6B 目录 笔记AbstractIntroductionThe design choices of GLM-130BThe …

06、基于内容的过滤算法Tensorflow实现

06、基于内容的过滤算法Tensorflow实现 开始学习机器学习啦&#xff0c;已经把吴恩达的课全部刷完了&#xff0c;现在开始熟悉一下复现代码。全部工程可从最上方链接下载。 05、基于梯度下降的协同过滤算法中已经介绍了协同过滤算法的基本实现方法&#xff0c;但是这种方法仅…

【华为OD题库-062】计算礼品发放的最小分组数目-java

题目 又到了一年的末尾&#xff0c;项目组让小明负责新年晚会的小礼品发放工作。为使得参加晚会的同时所获得的小礼品价值相对平衡&#xff0c;需要把小礼品根据价格进行分组&#xff0c;但每组最多只能包括两件小礼品&#xff0c;并且每个分组的价格总和不能超过一个价格上限。…

基于若依的ruoyi-nbcio流程管理系统增加流程节点配置(三)

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码&#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio 演示地址&#xff1a;RuoYi-Nbcio后台管理系统 这一节主要是对每个流程节点的字段规则设置与操作规则设置&#xff0c;目前也是只针对自定义业务表单。 1、…
最新文章