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

webpack如何处理css

news 2025/11/6 18:54:30
一、准备工作

新建目录

添加样式

.word {color: red;
}

index.js添加dom元素，添加一个css word

import './css/index.css';const div = document.createElement("div");
div.innerText = "hello word!!!";
div.className = "word";
document.body.appendChild(div);

然后把打包后的文件引入index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script src="./build/build.js"></script>
</body>
</html>

这个时候打包npm run build就会报错

这个时候就需要loader处理我们的css

二、css-loader

首先安装我们需要的loader

pnpm i -D css-loader

添加配置文件，test正则匹配文件，loader对应我们的loader名称

const path = require("path");/*** 类型提示* @type {import("webpack").Configuration}*/
const config = {entry: "./src/index.js",output: {filename: "build.js",path: path.resolve(__dirname, "./build"),},module: {rules: [{test: /\.css$/, //正则匹配文件use: [{loader: "css-loader",}],},],},
};
module.exports = config;

这个时候打包会发现界面的样式没有成功

 

这是因为css-loader只是处理，没有把我们的样式引入到对应的文件，我们需要另一个loader处理

三、style-loader

先安装后引入

pnpm i -D style-loader
module: {rules: [{test: /\.css$/, //正则匹配文件use: [{loader: 'style-loader',},{loader: "css-loader",},],},],},

我们需要注意loader的顺序，从下往上执行，我们先处理css然后通过style-loader注入样式

运行npm run build发现样式生效了

相关文章：

webpack如何处理css

一、准备工作 新建目录 添加样式 .word {color: red; } index.js添加dom元素&#xff0c;添加一个css word import ./css/index.css;const div document.createElement("div"); div.innerText "hello word!!!"; div.className "word"; do…...

编程日记 2023/12/3 23:33:52

IELTS学习笔记_grammar_新东方

参考&#xff1a; 新东方 田静 语法 目录&#xff1a; 导学简单句… x.1 导学 学语法以应用为主。 基础为&#xff1a;单词&#xff0c;语法 进阶为&#xff1a;听说读写译&#xff0c;只考听说读写。 words -> chunks -> sentences, chunks&#xff08;语块的重要…...

编程日记 2023/12/3 23:31:51

【计算机组成原理】存储器知识

目录 1、存储器分类 1.1、按存储介质分类 1.2、按存取方式分类 1.3、按信息的可改写性分类 1.4、按信息的可保存性分类 1.5、按功能和存取速度分类 2、存储器技术指标 2.1、存储容量 2.2、存取速度 3、存储系统层次结构 4、主存的基本结构 5、主存中数据的存放 5.…...

编程日记 2023/12/3 23:30:50

vscode配置代码片段

1.ctrl shift p 然后选择 Snippets:Configure User Snippets &#xff08;配置用户代码片段&#xff09; 2.选择vue或者vue.json 3.下面为json内容 { “vue-template”: { “prefix”: “modal-table”, “body”: [ “”, " <a-modal v-model:visible“visible” wi…...

编程日记 2023/12/3 23:27:47

vite脚手架，手写实现配置动态生成路由

参考文档 vite的glob-import vue路由配置基本都是重复的代码&#xff0c;每次都写一遍挺难受&#xff0c;加个页面就带配置下路由 那就利用 vite 的 文件系统处理啊 先看实现效果 1. 考虑怎么约定路由&#xff0c;即一个文件夹下&#xff0c;又有组件&#xff0c;又有页面&am…...

编程日记 2023/12/3 23:23:44

解决浏览器缓存问题

1.index.html文件meta标签添加属性 <meta name"viewport" content"widthdevice-width,initial-scale1.0, maximum-scale1.0, minimum-scale1.0, user-scalableno" viewport-fitcover >2.提前main.html处理逻辑再跳转到index.html页 <script>…...

编程日记 2023/12/3 23:22:43

【数据中台】开源项目（2）-Davinci可视应用平台

1 平台介绍 Davinci 是一个 DVaaS&#xff08;Data Visualization as a Service&#xff09;平台解决方案&#xff0c;面向业务人员/数据工程师/数据分析师/数据科学家&#xff0c;致力于提供一站式数据可视化解决方案。既可作为公有云/私有云独立部署使用&#xff0c;也可作为…...

编程日记 2023/12/3 23:19:41

Java实现简单飞翔小鸟游戏

一、创建新项目 首先创建一个新的项目&#xff0c;并命名为飞翔的鸟。 其次在飞翔的鸟项目下创建一个名为images的文件夹用来存放游戏相关图片。 用到的图片如下&#xff1a;0~7&#xff1a; bg&#xff1a; column&#xff1a; gameover&#xff1a; ground&#xff1a; st…...

编程日记 2023/12/3 23:16:38

numpy实现神经网络

numpy实现神经网络 首先讲述的是神经网络的参数初始化与训练步骤 随机初始化 任何优化算法都需要一些初始的参数。到目前为止我们都是初始所有参数为0&#xff0c;这样的初始方法对于逻辑回归来说是可行的&#xff0c;但是对于神经网络来说是不可行的。如果我们令所有的初始…...

编程日记 2023/12/3 23:12:35

Bean的加载控制

Bean的加载控制 文章目录 Bean的加载控制编程式注解式ConditionalOn*** 编程式 public class MyImportSelector implements ImportSelector {Overridepublic String[] selectImports(AnnotationMetadata annotationMetadata) {try {Class<?> clazz Class.forName("…...

编程日记 2023/12/3 23:11:34

使用 OpenCV 识别和裁剪黑白图像上的白色矩形--含源码

为了仅获取具有特定边框颜色的矩形，我寻求一种替代识别图像中的轮廓和所有矩形的传统方法。如示例图片所示，我有兴趣使用 opencv 仅获取白色边框矩形的坐标。任何这方面的建议将不胜感激。到目前为止，我的代码已产生如下所示的输出。我的下一个目标是将图像裁剪到大的中心框…...

编程日记 2023/12/3 23:08:32

LeetCode 每日一题 Day1

1094. 拼车 车上最初有 capacity 个空座位。车 只能 向一个方向行驶&#xff08;也就是说&#xff0c;不允许掉头或改变方向&#xff09; 给定整数 capacity 和一个数组 trips , trip[i] [numPassengersi, fromi, toi] 表示第 i 次旅行有 numPassengersi 乘客&#xff0c;接…...

编程日记 2023/12/3 23:07:31

【hacker送书活动第7期】Python网络爬虫入门到实战

第7期图书推荐 内容简介作者简介大咖推荐图书目录概述参与方式 内容简介 本书介绍了Python3网络爬虫的常见技术。首先介绍了网页的基础知识&#xff0c;然后介绍了urllib、Requests请求库以及XPath、Beautiful Soup等解析库&#xff0c;接着介绍了selenium对动态网站的爬取和S…...

编程日记 2023/12/3 23:05:29

【算法】希尔排序

目录 1. 说明2. 举个例子3. java代码示例4. java示例截图 1. 说明 1.希尔排序是直接插入排序的一种改进&#xff0c;其本质是一种分组插入排序 2.希尔排序采取了分组排序的方式 3.把待排序的数据元素序列按一定间隔进行分组&#xff0c;然后对每个分组进行直接插入排序 4.随着间…...

编程日记 2023/12/3 22:59:23

四、Zookeeper节点类型

目录 1、临时节点 2、永久节点 Znode有两种，分别为临时节点和永久节点。 节点的类型在创建时即被确定，并且不能改变。 1、临时节点 临时节点的生命周期依赖于创建它们的会话。一旦会话结束，临时节点将被自动删除，...

编程日记 2023/12/3 22:57:22

arcgis导出某个属性的栅格

选中栅格特定属性想要导出时&#xff0c;无法选中“所选图形” 【方法】spatial analyst 工具——提取分析——按属性提取...

编程日记 2023/12/3 22:55:20

计算机网络——传输层

传输层的基本单位是报文&#xff1b; 一、传输层的基本概念 传输层提供端到端的服务&#xff1b; 从通信和信息处理的角度看&#xff0c;传输层向上层应用层提供通信服务&#xff1b; &#xff08;一&#xff09;端口号 协议作用端口号FTP文件传输协议21连接&#xff1b;2…...

编程日记 2023/12/3 22:54:20

策略设计模式

package com.jmj.pattern.strategy;public interface Strategy {void show(); }package com.jmj.pattern.strategy;public class StrategyA implements Strategy{Overridepublic void show() {System.out.println("买一送一");} }package com.jmj.pattern.strategy;p…...

编程日记 2023/12/3 22:48:15

Golang中rune和Byte，字符和字符串有什么不一样

Rune和Byte&#xff0c;字符和字符串有什么不一样 String Go语言中&#xff0c; string 就是只读的采用 utf8 编码的字节切片(slice) 因此用 len 函数获取到的长度并不是字符个数&#xff0c;而是字节个数。 for循环遍历输出的也是各个字节。 Rune rune 是 int32 …...

编程日记 2023/12/3 22:47:14

实施工程师运维工程师面试题

Linux 1.请使用命令行拉取SFTP服务器/data/20221108/123.csv 文件&#xff0c;到本机一/data/20221108目录中。 使用命令行拉取SFTP服务器文件到本机指定目录&#xff0c;可以使用sftp命令。假设SFTP服务器的IP地址为192.168.1.100&#xff0c;用户名为username&#xff0c;密…...

编程日记 2023/12/3 22:46:14

Python｜GIF 解析与构建（5）：手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

编程新知 2025/9/19 8:02:57

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

编程新知 2025/11/6 8:34:10

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

编程新知 2025/11/4 6:26:59

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

编程新知 2025/8/16 7:00:37

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

编程新知 2025/10/26 22:44:53

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

编程新知 2025/11/4 16:34:38

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

编程新知 2025/9/25 14:10:40

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

编程新知 2025/10/21 23:40:19

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

编程新知 2025/10/7 15:08:22

DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

编程新知 2025/9/24 13:35:36