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

webpack如何处理css

news 2026/5/16 8:48:18

一、准备工作

新建目录

添加样式

.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元素，添加一个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_新东方

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

编程日记 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 （配置用户代码片段） 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路由配置基本都是重复的代码，每次都写一遍挺难受，加个页面就带配置下路由那就利用 vite 的文件系统处理啊先看实现效果 1. 考虑怎么约定路由，即一个文件夹下，又有组件，又有页面&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（Data Visualization as a Service）平台解决方案，面向业务人员/数据工程师/数据分析师/数据科学家，致力于提供一站式数据可视化解决方案。既可作为公有云/私有云独立部署使用，也可作为…...

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

Java实现简单飞翔小鸟游戏

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

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

numpy实现神经网络

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

编程日记 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 个空座位。车只能向一个方向行驶（也就是说，不允许掉头或改变方向） 给定整数 capacity 和一个数组 trips , trip[i] [numPassengersi, fromi, toi] 表示第 i 次旅行有 numPassengersi 乘客，接…...

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

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

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

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

【算法】希尔排序

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

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

四、Zookeeper节点类型

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

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

arcgis导出某个属性的栅格

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

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

计算机网络——传输层

传输层的基本单位是报文； 一、传输层的基本概念传输层提供端到端的服务； 从通信和信息处理的角度看，传输层向上层应用层提供通信服务； （一）端口号协议作用端口号FTP文件传输协议21连接；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，字符和字符串有什么不一样 String Go语言中， string 就是只读的采用 utf8 编码的字节切片(slice) 因此用 len 函数获取到的长度并不是字符个数，而是字节个数。 for循环遍历输出的也是各个字节。 Rune rune 是 int32 …...

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

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

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

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

Ryujinx模拟器三部曲：从新手到专家的Switch游戏PC体验进阶指南

Ryujinx模拟器三部曲：从新手到专家的Switch游戏PC体验进阶指南【免费下载链接】Ryujinx 用 C# 编写的实验性 Nintendo Switch 模拟器项目地址: https://gitcode.com/GitHub_Trending/ry/Ryujinx 你是否曾梦想在电脑上畅玩《塞尔达传说：旷野之息…...

编程新知 2026/5/16 8:31:59