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

(03)vite 处理 css

文章目录

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

在这里插入图片描述

系列全集

(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 时,一般是上生产环境,默认情况下也是不开启的。

在这里插入图片描述

vite 利用postcss样式兼容低版本浏览器

安装

yarn add postcss-preset-env -D

vite.config.hs中配置

import { defineConfig } from "vite";
import postcssPresetEnv from "postcss-preset-env";export default defineConfig({optimizeDeps: {exclude: [], // 将指定数组中的依赖不进行预构建},envPrefix: "ENV", // 更改环境变量注入到业务代码中,所需的前缀名css: {modules: {scopeBehaviour: "local", // 配置当前的css样式的行为是local模块化,还是global全局化,有hash就是开启模块化,因为它可以保证不同的模块相同类名不重复。// generateScopedName: "[name]__[local]___[hash:base64:5]", // 自定义生成名字的规则 更多配置 https://github.com/webpack/loader-utils#interpolatenamelocalsConvention: 'camelCase', // 修改生成的配置对象的展示形式,驼峰/下划线camelCaseOnly/中划线形式hashPrefix: "11", // 补充的hash前缀,会参与到生成的类名中// globalModulePaths: [""]},devSourcemap: true, // 开发中能够快速找到某样式对应的样式文件postcss: {plugins:[postcssPresetEnv()]}}
});

测试css是否降级兼容

.footer {width: clamp(100px, 100%, 500px);height: 300px;background-color: aquamarine;
}

配置postcssPresetEnv 之前
在这里插入图片描述

配置postcssPresetEnv 之后
在这里插入图片描述

在这里插入图片描述

相关文章:

(03)vite 处理 css

文章目录 系列全集vite 处理css流程vite如何解决协同开发,样式重复覆盖的问题?使用less通过配置,更改vite的css默认行为vite 利用postcss样式兼容低版本浏览器 系列全集 (01)vite 从启动服务器开始 (02&am…...

阿里云上传文件出现的问题解决(跨域设置)

跨域设置引起的问题 起因&#xff1a;开通对象存储服务后&#xff0c;上传文件限制在5M 大小&#xff0c;无法上传大文件。 1.查看报错信息 2.分析阿里云服务端响应内容 <?xml version"1.0" encoding"UTF-8"?> <Error><Code>Invali…...

利用JavaFX生成验证码图片

以下是一个基于 JavaFX 的验证码图片生成小程序的示例代码: import javafx.application.Application; import javafx.embed.swing.SwingFXUtils; import javafx.scene.Scene; import javafx.scene.canvas.Canvas; import javafx.scene.canvas.GraphicsContext; import javafx…...

6-55.汽车类的继承

根据给定的汽车类vehicle&#xff08;包含的数据成员有车轮个数wheels和车重weight&#xff09;声明&#xff0c;完成其中成员函数的定义&#xff0c;之后再定义其派生类并完成测试。 小车类car是它的派生类&#xff0c;其中包含载人数passenger_load。每个类都有相关数据的输出…...

SCI论文——respectively用法

respectively用于配对两组&#xff08;三组&#xff09;事物&#xff0c;表明后一组与前一组按照相同的顺序排列&#xff0c;从而使句意明确。一般是在句子的最后&#xff0c;而且在respectively的前面需要一个逗号“,” 一 、两组事物&#xff1a; 原则是尽可能靠近第二组的…...

解决方案 | 法大大电子签约加速农牧业数字化进程

近年来&#xff0c;我国农业技术得到快速发展&#xff0c;并开发出一批实用的数字农业技术产品&#xff0c;建立了专用网络数字农业技术平台。数字农业是农业现代化的高级阶段&#xff0c;是创新推动农业农村信息化发展的有效手段&#xff0c;也是我国由农业大国迈向农业强国的…...

设计模式之GoF23介绍

深入探讨设计模式&#xff1a;构建可维护、可扩展的软件架构 一、设计模式的背景1.1 什么是设计模式1.2 设计模式的历史 二、设计模式的分类2.1 创建型模式2.2 结构型模式2.3 行为型模式 三、七大设计原则四、设计模式关系结论 :rocket: :rocket: :rocket: 在软件开发领域&…...

UDP协议实现群聊

服务端 import java.io.*; import java.net.*; import java.util.ArrayList; public class Server{public static ServerSocket server_socket;public static ArrayList<Socket> socketListnew ArrayList<Socket>(); public static void main(String []args){try{…...

lombok原理 @Slf4j 怎么生成get set log

Lombok是一种Java库&#xff0c;通过注解的方式提供了许多有用的功能&#xff0c;包括生成Getter、Setter、日志等。Slf4j注解是Lombok中的一种&#xff0c;它用于自动生成日志记录器&#xff08;Logger&#xff09;。 下面简要介绍一下Lombok的原理&#xff0c;以及Slf4j注解…...

【目标检测】进行实时检测计数时,在摄像头窗口显示实时计数个数

这里我是用我本地训练的基于yolov8环境的竹签计数模型&#xff0c;在打开摄像头窗口增加了实时计数显示的代码&#xff0c;可以直接运行&#xff0c;大家可以根据此代码进行修改&#xff0c;其底层原理时将检测出来的目标的个数显示了出来。 该项目链接&#xff1a;【目标检测…...

SpringBoot第56讲:SpringBoot集成文件 - 集成EasyExcel之Excel导入导出

集成EasyExcel之Excel导入导出 EasyExcel是一个基于Java的、快速、简洁、解决大文件内存溢出的Excel处理工具。它能让你在不用考虑性能、内存的等因素的情况下,快速完成Excel的读、写等功能。它是基于POI来封装实现的,主要解决其易用性,封装性和性能问题。本文是SpringBoot第…...

python3安装lifelines

目录 一、环境 二、安装lifelines 出现问题 三、测试导入 一、环境&#xff1a; jupyter notebook中新建ipynb文件 二、安装lifelines pip install --upgrade --no-deps githttps://github.com/CamDavidsonPilon/lifelines.git出现问题&#xff1a; 缺少模块autograd、f…...

shell命令学习(1)——(待完善)

explainshell.com shell统计当前文件夹下的文件个数、目录个数Linux之shell常用命令&#xff08;三&#xff09; sort&#xff08;排序&#xff09;、uniq&#xff08;处理重复字符&#xff09; linux中shell将换行输入到文件中 shell脚本&#xff0c;将多行内容写入文件中 f…...

机器的深度强化学习算法可以被诱导

设计一个好的奖励函数是机器深度强化学习算法的关键之一。奖励函数用于给予智能体&#xff08;机器&#xff09;在环境中采取不同行动时的反馈信号&#xff0c;以指导其学习过程。一个好的奖励函数应该能够引导智能体朝着期望的行为方向学习&#xff0c;并尽量避免潜在的问题&a…...

学生成绩管理系统(Java)

开发环境: Windows 11 IDEA 2021.3.3 需求: package com.it.neu;import java.util.ArrayList; import java.util.Scanner;import static java.time.Clock.system;class Student { //创建学生类private String Stu_name;private String Stu_id;public Student(String id, S…...

Modbus数据采集模块是什么?

随着工业自动化的快速发展&#xff0c;数据采集已成为现代工厂不可或缺的一环。在众多通信协议中&#xff0c;Modbus因其开放、简单、可靠的特点而广受青睐。那么&#xff0c;什么是Modbus数据采集模块&#xff0c;它又有哪些应用呢&#xff1f; 一、什么是Modbus数据采集模块…...

【网络安全】下载并安装 kali 的虚拟机 版本

kali虚拟机版本的下载地址&#xff1a;Get Kali | Kali Linux 下载完成后&#xff0c;解压&#xff0c;双击.vmx打开&#xff0c;即可完成kali在虚拟机中的安装和配置。 默认账户和密码都为kali...

JREBEL 热部署原理

JRebel&#xff08;Java Rebel&#xff09;是一个Java开发工具&#xff0c;它提供了一种在不重启应用服务器的情况下进行Java应用程序的热部署的方式。通过JRebel&#xff0c;开发者可以在修改Java代码后立即看到变化&#xff0c;加速开发和调试过程。 以下是JRebel实现热部署…...

履带吊,笔记

0.前言 履带吊使用了与传统的门桥式起重机不同的技术路线。因为它是移动式设备&#xff0c;所以它的动力是燃油发动机。为了精确调控升降。它的整套动力系统似乎采用了某种液压传动系统。履带吊国内也有生产商。但是下文中&#xff0c;还是从国外的一款产品说起。这款产品的pd…...

WPF转换器Convert

图像名称转换器ImageNameConverter&#xff0c;用于在数据绑定中将图像路径转换为图像文件名。 转换器的代码如下&#xff1a; using System; using System.Globalization; using System.IO; using System.Windows.Data;namespace ImageConverter {public class ImageNameCon…...

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

C++ 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

uniapp 字符包含的相关方法

在uniapp中&#xff0c;如果你想检查一个字符串是否包含另一个子字符串&#xff0c;你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的&#xff0c;但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...

Golang——9、反射和文件操作

反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一&#xff1a;使用Read()读取文件2.3、方式二&#xff1a;bufio读取文件2.4、方式三&#xff1a;os.ReadFile读取2.5、写…...

基于鸿蒙(HarmonyOS5)的打车小程序

1. 开发环境准备 安装DevEco Studio (鸿蒙官方IDE)配置HarmonyOS SDK申请开发者账号和必要的API密钥 2. 项目结构设计 ├── entry │ ├── src │ │ ├── main │ │ │ ├── ets │ │ │ │ ├── pages │ │ │ │ │ ├── H…...

React从基础入门到高级实战:React 实战项目 - 项目五:微前端与模块化架构

React 实战项目&#xff1a;微前端与模块化架构 欢迎来到 React 开发教程专栏 的第 30 篇&#xff01;在前 29 篇文章中&#xff0c;我们从 React 的基础概念逐步深入到高级技巧&#xff0c;涵盖了组件设计、状态管理、路由配置、性能优化和企业级应用等核心内容。这一次&…...