【快速搞定Webpack5】处理样式资源(三)

本次内容我们将学习使用webpack如何处理css、less、sass、scss等样式资源
在这里插入图片描述

介绍

webpack本身是不能识别样式资源的,所以我们需要借助loader包来帮助webpack解析样式资源
我们找loader都应该去官方文档中查找对应的loader,然后学习使用。
官方文档找不到的话,可以从社区、GitHub中搜索查询

css-loader | webpack 中文文档

一、处理Css资源

1、下载对应包

npm i css-loader style-loader -D

Ps:注意需要下载两个loader

2、功能介绍

css-loader:负责将css文件编译成webpack能识别的模块
style-loader:会动态创建一个style标签,里面放置webpack中引入的css模块内容

此样式就会以style标签的形式在页面上生效

3、创建CSS资源

在根目录/src/css/index.css,中创建文件夹及文件,然后随便写一点css样式

.box1 {width: 100px;height: 100px;background-color: pink;margin: 10px;
}

4、配置

● 在src/main.js中引入前面创建的css文件

import count from "./js/count";
import sum from "./js/sum";
// 要想webpack打包该资源,必须引入该资源
import "./css/index.css"

css文件只需引入不需要调用和起函数名

● 在根目录下的 webpack.config.js中增加配置

// 加载器module: {rules: [// loader的配置{test: /\.css$/,     // 只检测.css文件use:[// 执行顺序,从右到左,从下到上"style-loader", // 将js中的css通过创建style标签添加到html文件中生效"css-loader"    // 将css资源编译成commonJs的模块到js中],     },],},

5、运行命令

npx webpack

6、html页面增加代码,查看页面效果

...
<body><h1>Hello WebPack</h1><br /><div class="box1"></div><div class="box1"></div><div class="box1"></div><div class="box1"></div><script src="../dist/main.js"></script>
</body>...

在这里插入图片描述

二、处理 Less 资源

1、下载包

npm i less less-loader -D

2、功能介绍

less-loader:负责将less文件编译成css文件

3、添加less资源

● 在根目录/src/less/index.less,中创建文件夹及文件,然后随便写一点css样式

.box2 {width: 150px;height: 150px;background-color:tomato;margin: 5px;border-radius: 5px;float: left;
}

● 顺便在html中再增加几个 box2div

...<body><h1>Hello WebPack</h1><br /><div class="box1"></div><div class="box1"></div><div class="box1"></div><div class="box1"></div><hr /><div class="box2"></div><div class="box2"></div><div class="box2"></div><div class="box2"></div><script src="../dist/main.js"></script>
</body>...

4、配置

● 在src/main.js中引入前面创建的less文件

import count from "./js/count";
import sum from "./js/sum";
// 要想webpack打包该资源,必须引入该资源
import "./css/index.css"
import "./less/index.less"

● 在根目录下的 webpack.config.js中增加配置

const path = require("path");module.exports = {// 入口entry: "./src/main.js",  // 需要用相对路径// 输出output: {// 文件的输出路径// __dirname nodejs的变量,代表当前文件的文件夹目录path: path.resolve(__dirname, "dist"),   // 需要用绝对路径 需要用的Nodejs的核心模块 path,专门处理路径问题// 文件名filename: "main.js",},// 加载器module: {rules: [// loader的配置{test: /\.css$/,     // 只检测.css文件use:[// 执行顺序,从右到左,从下到上"style-loader", // 将js中的css通过创建style标签添加到html文件中生效"css-loader",    // 将css资源编译成commonJs的模块到js中],     },{test: /\.less$/,     // 只检测.less文件// loader: "xxx", // 配置中只能使用一个loader,use可以多个use:[// 执行顺序,从右到左,从下到上"style-loader", // 将js中的css通过创建style标签添加到html文件中生效"css-loader",    // 将css资源编译成commonJs的模块到js中"less-loader",    // 将less资源编译成css],},],},// 插件plugins: [// plugin的配置],// 模式mode: "development",
};

5、运行命令

npx webpack

6、html页面增加代码,查看页面效果

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/695375.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux中安装Nginx及日常配置使用

高性能的http服务器/反向代理服务器。官方测试支持5万并发&#xff0c;CPU、内存等消耗较低且运行稳定 使用场景 Http服务器。 Nginx可以单独提供Http服务&#xff0c;做为静态网页的服务器。虚拟主机。 可以在一台服务器虚拟出多个网站。反向代理与负载均衡。 Nginx做反向代理…

LaWGPT—基于中文法律知识的大模型

文章目录 LaWGPT&#xff1a;基于中文法律知识的大语言模型数据构建模型及训练步骤两个阶段二次训练流程指令精调步骤计算资源 项目结构模型部署及推理 LawGPT_zh&#xff1a;中文法律大模型&#xff08;獬豸&#xff09;数据构建知识问答模型推理训练步骤 LaWGPT&#xff1a;基…

c++用户管理信息(双向链表)

c用户管理信息---双向链表 ListStu双向链表--&#xff08;把前面的单链表改一下&#xff0c;就直接可以用&#xff09;ListStu.hListStu.cpp ListStu双向链表–&#xff08;把前面的单链表改一下&#xff0c;就直接可以用&#xff09; ListStu.h #pragma once #include "…

yarn常用命令小记

安装 npm install -g yarn查看版本 yarn -v初始化项目与依赖管理 yarn init&#xff1a;与npm init一样通过交互式会话生成一个新的package.jason文件以初始化项目&#xff1b;跳过会话可使用yarn init --yes&#xff0c;简写yarn init -yyarn add <package><versi…

【转载】企业资产收集与脆弱性检查工具

简介 云图极速版是针对拥有攻击面管理需求的用户打造的 SaaS 应用&#xff0c;致力于协助用户管理互联网资产攻击面的 SaaS 化订阅服务产品。可实现对备案域名、子域名、IP、端口、服务、网站、漏洞、安全风险等场景进行周期性监控&#xff0c;支持多维度分析攻击面。利用可视化…

java 中开源的html解析库Jsoup 简单例子

下面是一个使用Jsoup库解析HTML的简单Java例子。这个例子展示了如何使用Jsoup从一个HTML字符串中提取数据。 首先&#xff0c;确保你已经将Jsoup作为依赖项添加到你的项目中。如果你使用的是Maven&#xff0c;可以在pom.xml文件中添加以下依赖&#xff1a; &…

《图解设计模式》笔记(一)适应设计模式

图灵社区 - 图解设计模式 - 随书下载 评论区 雨帆 2017-01-11 16:14:04 对于设计模式&#xff0c;我个人认为&#xff0c;其实代码和设计原则才是最好的老师。理解了 SOLID&#xff0c;如何 SOLID&#xff0c;自然而然地就用起来设计模式了。Github 上有一个 tdd-training&…

【达梦数据库】通过系统函数来配置sqllog

环境说明&#xff1a;达梦2024年Q4季度版之后版本支持 通过系统函数进行sqllog参数配置 -- 新增模式 SLOG_CONFIG1 和 SLOG_CONFIG2&#xff1a; SP_SET_SQLLOG_INI([SLOG_CONFIG1]FILE_PATH../log;PART_STOR0;[SLOG_CONFIG2]SWITCH_MODE2;SWITCH_LIMIT128);-- 删除模式名为 S…

redis复习笔记06(小滴课堂)

分布式锁核心知识介绍和注意事项 基于Redis实现分布式锁的几种坑 综合伪代码&#xff1a; 运行&#xff1a;

PDF加粗内容重复读取解决方案

文章目录 前言发现问题解决方案问题分析大致逻辑 show my code 前言 在使用pdfplumber读取PDF的过程中&#xff0c;由于加黑的内容会被莫名其妙的读取两次&#xff0c;带来了很大的困扰。这篇文章将给出解决方案。 发现问题 在在使用pdfplumber读取PDF的过程中&#xff0c;读…

LLaMA 2 - 你所需要的一切资源

摘录 关于 LLaMA 2 的全部资源&#xff0c;如何去测试、训练并部署它。 LLaMA 2 是一个由 Meta 开发的大型语言模型&#xff0c;是 LLaMA 1 的继任者。LLaMA 2 可通过 AWS、Hugging Face 等提供商获取&#xff0c;并免费用于研究和商业用途。LLaMA 2 预训练模型在 2 万亿个标记…

HarmonyOS开发技术全面分析

系统定义 HarmonyOS 是一款 “ 面向未来 ” 、面向全场景&#xff08;移动办公、运动健康、社交通信、媒体娱乐等&#xff09;的分布式操作系统。在传统的单设备系统能力的基础上&#xff0c;HarmonyOS提出了基于同一套系统能力、适配多种终端形态的分布式理念&#xff0c;能够…

python读写文件操作的三大基本步骤

目录 基本步骤 常用函数 open()函数 close()函数 read()函数 readlines()函数 readline()函数 write()函数 writelines()函数 with语句 读写操作的应用&#xff1a; 拷贝文件 with 语句的嵌套 逐行拷贝 基本步骤 1. 打开文件&#xff1a;open(filepath, mode, en…

探索亚马逊自养号测评的实际效果与使用感受

自养号在亚马逊测评中的应用给了我们一种全新的体验。通过使用亚马逊自养号&#xff0c;我们发现了许多令人满意的优势&#xff0c;这些优势不仅提升了我们的测评效率&#xff0c;还增加了我们的信誉度。 首先&#xff0c;自养号的质量可控性给了我们极大的信心。我们可以自行…

css中, grid-auto-rows: 怎样简写在grid:中

grid-auto-rows:100px; grid-template-columns:1fr 1fr; &#x1f446;可以写成&#x1f447; grid:auto-flow 100px / 1fr 1fr;在CSS Grid布局中&#xff0c;grid-auto-rows 属性用于指定自动生成的网格容器的行的大小。如果你想要将 grid-auto-rows 的值简写在 grid 属性中&a…

基于CNN-GRU-Attention的时间序列回归预测matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 CNN&#xff08;卷积神经网络&#xff09;部分 4.2 GRU&#xff08;门控循环单元&#xff09;部分 4.3 Attention机制部分 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版…

【Vue渗透】Vue站点渗透思路

原文地址 极核GetShell 前言 本文经验适用于前端用Webpack打包的Vue站点&#xff0c;阅读完本文&#xff0c;可以识别出Webpack打包的Vue站点&#xff0c;同时可以发现该Vue站点的路由。 成果而言&#xff1a;可能可以发现未授权访问。 识别Vue 识别出Webpack打包的Vue站…

FFmpeg的HEVC解码器源代码学习笔记-1

一直想写一个HEVC的码流解析工具&#xff0c;看了雷神264码流解析工具&#xff0c;本来想尝试模仿写一个相似的265码流分析工具&#xff0c;但是发现265的解码过程和结构体和264的不太一样&#xff0c;很多结构体并没有完全暴露出来&#xff0c;没有想到很好的方法获得量化参数…

关键字查找,将匹配到的词标红

效果图&#xff1a; 候补 特别说明&#xff1a; 该文有很多新奇的用法&#xff0c;包括载入ui文件、连接信号和控件等等&#xff0c;有很多值得学习的地方 具体实现&#xff1a; 配置文件 #! [0] QT widgets uitoolsHEADERS textfinder.h SOURCES textfinder.cpp main.cpp…

自增a++和自减a--详细解析

1.自增、自减运算符是什么&#xff0c;有什么作用&#xff0c;需要注意什么? 、–;对当前变量值1、-1只能操作变量&#xff0c;不能操作字面量 2.自增、自减运算符放在变量前后有区别吗? 如果单独使用放前放后是没有区别的非单独使用:在变量前&#xff0c;先进行变量自增/…