Webpack5入门到原理5：处理样式资源

处理样式资源

我们学习使用 Webpack 如何处理 Css、Less、Sass、Scss、Styl 样式资源

介绍

Webpack 本身是不能识别样式资源的，所以我们需要借助 Loader 来帮助 Webpack 解析样式资源

我们找 Loader 都应该去官方文档中找到对应的 Loader，然后使用

官方文档找不到的话，可以从社区 Github 中搜索查询

Webpack 官方 Loader 文档

处理 Css 资源

1. 下载包

npm i css-loader style-loader -D

注意：需要下载两个 loader

2. 功能介绍

  • css-loader：负责将 Css 文件编译成 Webpack 能识别的模块
  • style-loader：会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容

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

3. 配置

const path = require("path");module.exports = {entry: "./src/main.js",output: {path: path.resolve(__dirname, "dist"),filename: "main.js",},module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: ["style-loader", "css-loader"],},],},plugins: [],mode: "development",
};

4. 添加 Css 资源

  • src/css/index.css
.box1 {width: 100px;height: 100px;background-color: pink;
}
  • src/main.js
import count from "./js/count";
import sum from "./js/sum";
// 引入 Css 资源，Webpack才会对其打包
import "./css/index.css";console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));
  • public/index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>webpack5</title></head><body><h1>Hello Webpack5</h1><!-- 准备一个使用样式的 DOM 容器 --><div class="box1"></div><!-- 引入打包后的js文件，才能看到效果 --><script src="../dist/main.js"></script></body>
</html>

5. 运行指令

npx webpack

打开 index.html 页面查看效果

处理 Less 资源

1. 下载包

npm i less-loader -D

2. 功能介绍

less-loader：负责将 Less 文件编译成 Css 文件

3. 配置

const path = require("path");module.exports = {entry: "./src/main.js",output: {path: path.resolve(__dirname, "dist"),filename: "main.js",},module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: ["style-loader", "css-loader"],},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader"],},],},plugins: [],mode: "development",
};

4. 添加 Less 资源

src/less/index.less

.box2 {width: 100px;height: 100px;background-color: deeppink;
}

src/main.js

import count from "./js/count";
import sum from "./js/sum";
// 引入资源，Webpack才会对其打包
import "./css/index.css";
import "./less/index.less";console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));
  • public/index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>webpack5</title></head><body><h1>Hello Webpack5</h1><div class="box1"></div><div class="box2"></div><script src="../dist/main.js"></script></body>
</html>

5. 运行指令

npx webpack

打开 index.html 页面查看效果

处理 Sass 和 Scss 资源

1. 下载包

npm i sass-loader sass -D

注意：需要下载两个

2. 功能介绍

  • sass-loader：负责将 Sass 文件编译成 css 文件
  • sass：sass-loader 依赖 sass 进行编译

3. 配置

const path = require("path");module.exports = {entry: "./src/main.js",output: {path: path.resolve(__dirname, "dist"),filename: "main.js",},module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: ["style-loader", "css-loader"],},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader"],},{test: /\.s[ac]ss$/,use: ["style-loader", "css-loader", "sass-loader"],},],},plugins: [],mode: "development",
};

4. 添加 Sass 资源

  • src/sass/index.sass
/* 可以省略大括号和分号 */
.box3width: 100pxheight: 100pxbackground-color: hotpink
  • src/sass/index.scss
.box4 {width: 100px;height: 100px;background-color: lightpink;
}
  • src/main.js
import count from "./js/count";
import sum from "./js/sum";
// 引入资源，Webpack才会对其打包
import "./css/index.css";
import "./less/index.less";
import "./sass/index.sass";
import "./sass/index.scss";console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));
  • public/index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>webpack5</title></head><body><h1>Hello Webpack5</h1><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div><script src="../dist/main.js"></script></body>
</html>

5. 运行指令

npx webpack

打开 index.html 页面查看效果

处理 Styl 资源

1. 下载包

npm i stylus-loader -D

2. 功能介绍

stylus-loader：负责将 Styl 文件编译成 Css 文件

3. 配置

const path = require("path");module.exports = {entry: "./src/main.js",output: {path: path.resolve(__dirname, "dist"),filename: "main.js",},module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: ["style-loader", "css-loader"],},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader"],},{test: /\.s[ac]ss$/,use: ["style-loader", "css-loader", "sass-loader"],},{test: /\.styl$/,use: ["style-loader", "css-loader", "stylus-loader"],},],},plugins: [],mode: "development",
};

4. 添加 Styl 资源

  • src/styl/index.styl
/* 可以省略大括号、分号、冒号 */
.box width 100px height 100px background-color pink
  • src/main.js
import { add } from "./math";
import count from "./js/count";
import sum from "./js/sum";
// 引入资源，Webpack才会对其打包
import "./css/index.css";
import "./less/index.less";
import "./sass/index.sass";
import "./sass/index.scss";
import "./styl/index.styl";console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));
  • public/index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>webpack5</title></head><body><h1>Hello Webpack5</h1><!-- 准备一个使用样式的 DOM 容器 --><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div><div class="box5"></div><script src="../dist/main.js"></script></body>
</html>

5. 运行指令

npx webpack

打开 index.html 页面查看效果

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

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

相关文章

美易平台：福特汽车美股盘前跌1.8%，公司宣布削减纯电动皮卡F-150 Lightning的生产。

美易平台：福特汽车美股盘前跌1.8%，公司宣布削减纯电动皮卡F-150 Lightning的生产。

福特汽车宣布削减纯电动皮卡F-150 Lightning的生产&#xff0c;这一消息导致福特汽车的美股在盘前下跌了1.8%。这一决定引起了广泛的关注和讨论&#xff0c;因为F-150 Lightning是福特汽车在电动车领域的一次重要尝试。 根据福特汽车的声明&#xff0c;他们决定削减F-150 Ligh…
阅读更多...
SOCKET编程和TCP通信案例三次握手四次挥手

SOCKET编程和TCP通信案例三次握手四次挥手

文章目录 一、SOCKET1、网络套接字SOCKET2、网络字节序2.1、小端法2.2、大端法2.3、字节序转换3、IP地址转换函数3.1、本地字节序转网络字节序3.1.1、函数原型&#xff1a;3.1.2、返回值3.2、网络字节序转本地字节序3.2.1、函数原型3.2.2、返回值4、sockaddr地址结构&#xff0…
阅读更多...
【蓝桥杯EDA设计与开发】立创开源社区分享的关于蓝桥被EDA真题与仿真题的项目分析

【蓝桥杯EDA设计与开发】立创开源社区分享的关于蓝桥被EDA真题与仿真题的项目分析

立创开源社区内有几个项目分享了往年 EDA 设计题目与仿真题&#xff0c;对此展开了学习。 【本人非科班出身&#xff0c;以下对项目的学习仅在我的眼界范围内发表意见&#xff0c;如有错误&#xff0c;请指正。】 项目一 来源&#xff1a;第十四届蓝桥杯EDA赛模拟题一 - 嘉立…
阅读更多...
开源版禅道用于考核的解决方案

开源版禅道用于考核的解决方案

禅道的基本流程为&#xff1a;创建产品、创建计划、创建需求、创建项目、创建迭代、【关联需求】创建任务、维护任务、【根据任务】创建bug、解决bug 根据是否受禅道系统的基本流程管理&#xff0c;把角色分为两种&#xff0c;流程角色和其他角色。流程角色要管理对应的禅道流程…
阅读更多...
网络爬虫采集工具

网络爬虫采集工具

在当今数字化的时代&#xff0c;获取海量数据对于企业、学术界和个人都至关重要。网络爬虫成为一种强大的工具&#xff0c;能够从互联网上抓取并提取所需的信息。本文将专心分享关于网络爬虫采集数据的全面指南&#xff0c;深入探讨其原理、应用场景以及使用过程中可能遇到的挑…
阅读更多...
C++无锁队列的原理与实现

C++无锁队列的原理与实现

目录 1.无锁队列原理 1.1.队列操作模型 1.2.无锁队列简介 1.3.CAS操作 2.无锁队列方案 2.1.boost方案 2.2.ConcurrentQueue 2.3.Disruptor 3.无锁队列实现 3.1.环形缓冲区 3.2.单生产者单消费者 3.3.多生产者单消费者 3.4.RingBuffer实现 3.5.LockFreeQueue实现 …
阅读更多...
实现仿ChatGPT光标跟随效果

实现仿ChatGPT光标跟随效果

先看效果 实现效果 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>光标闪烁效果</title>…
阅读更多...
【Java万花筒】Java脚本之舞：发现动态脚本的神奇力量

【Java万花筒】Java脚本之舞：发现动态脚本的神奇力量

脚本大联合&#xff1a;Java生态中的动态脚本执行库详解 前言 在现代软件开发中&#xff0c;动态脚本的使用越来越受到重视。本文将深入探讨Java生态中几个重要的动态脚本执行库&#xff0c;包括Apache Groovy、ScriptEngine API、Nashorn、Kotlin Scripting和JRuby。通过对每…
阅读更多...
网络安全需要对网络风险有独特的理解

网络安全需要对网络风险有独特的理解

迷失在翻译中&#xff1a;网络风险解释的脱节现实 在古印度的一个经典故事中&#xff0c;几个蒙住眼睛的人接近一头大象&#xff0c;每个人检查不同的部位。有人触摸树干&#xff0c;认为它像一条蛇。另一个摸到了一条腿&#xff0c;认为它是一棵树。还有一个拿着象牙的人&…
阅读更多...
云平台性能测试之存储性能测试

云平台性能测试之存储性能测试

一、认识存储磁盘IO 磁盘IO测试是指在性能测试过程中&#xff0c;对系统的磁盘读写操作进行测试和评估的过程。磁盘是计算机系统中重要的存储介质&#xff0c;对于许多应用程序来说&#xff0c;磁盘IO的性能影响着系统的整体性能。 在性能测试中&#xff0c;磁盘IO测试通常有…
阅读更多...
高级编程，JavaScript笔记-字符串的常用方法

高级编程，JavaScript笔记-字符串的常用方法

一、操作方法 我们也可将字符串常用的操作方法归纳为增、删、改、查&#xff0c;需要知道字符串的特点是一旦创建了&#xff0c;就不可变 增 这里增的意思并不是说直接增添内容&#xff0c;而是创建字符串的一个副本&#xff0c;再进行操作 除了常用以及${}进行字符串拼接之…
阅读更多...
Java中打印图案最常用的25个图案程序

Java中打印图案最常用的25个图案程序

Java是公认的最流行的编程语言&#xff0c;因为它的简单性和多功能性。还可以使用它开发各种应用程序&#xff0c;包括Web、移动和桌面应用程序。此外&#xff0c;Java为开发人员提供了强大的工具来轻松高效地创建复杂的程序。Java最有前途的特性之一是它能够创建可以以特定格式…
阅读更多...
《向量数据库指南》——为什么说向量数据库是更适合AI体质的“硬盘”

《向量数据库指南》——为什么说向量数据库是更适合AI体质的“硬盘”

其“AI原生”的体质，具体表现在几个方面： 1.更高的效率。 AI算法，要从图像、音频和文本等海量的非结构化数据中学习，提取出以向量为表示形式的“特征”，以便模型能够理解和处理。因此，向量数据库比传统基于索引的数据库有明显优势。 2.更低的成本。 大模型要从一种新…
阅读更多...
美易平台：美国阿特拉斯航空公司波音747 8型货机因发动机故障安全降落

美易平台：美国阿特拉斯航空公司波音747 8型货机因发动机故障安全降落

正文&#xff1a; 据路透社报道&#xff0c;美国阿特拉斯航空公司的一架波音747 8型货机在从迈阿密国际机场起飞后不久&#xff0c;发动机出现故障&#xff0c;但幸运的是飞机成功安全降落。这一事件引起了人们对航空安全的关注。 根据航空信息网站Flightaware的数据显示&…
阅读更多...
【stm32】hal库学习笔记-GPIO按键控制LED和蜂鸣器（超详细！）

【stm32】hal库学习笔记-GPIO按键控制LED和蜂鸣器（超详细！）

【stm32】hal库学习笔记-GPIO按键控制LED和蜂鸣器 注&#xff1a;本学习笔记基于stm32f4系列 使用的开发板为正点原子stmf407ZGT6探索者开发板 GPIO引脚使用时&#xff0c;可输入或输出数字信号 例如: 检测按键输入信号&#xff08;Read_Pin&#xff09;输出信号&#xff08;W…
阅读更多...
敏捷开发之开发流程

敏捷开发之开发流程

敏捷开发流程 一、迭代周期 我们团队的迭代周期一般是2周&#xff0c;如果研发评估时间过长的话也会将周期延长至一个月&#xff0c;但是大多数我们是2周的迭代周期。 这里说的2周是研发开始coding、提测、测试、上线&#xff0c;也就是说2周以后要上线相应的能力。并不包括…
阅读更多...
flink operator 拉取阿里云私有镜像（其他私有类似）

flink operator 拉取阿里云私有镜像（其他私有类似）

创建 k8s secret kubectl --namespace flink create secret docker-registry aliyun-docker-registry --docker-serverregistry.cn-shenzhen.aliyuncs.com --docker-usernameops_acr1060896234 --docker-passwordpasswd --docker-emailDOCKER_EMAIL注意命名空间指定你使用的 我…
阅读更多...
从0开始python学习-50.pytest之多接口用例封装

从0开始python学习-50.pytest之多接口用例封装

1. yaml用例设计--一个yaml中多个用例&#xff0c;且互相存在关联关系 - # 第一个用例request:method: posturl: http://192.168.0.1:8010/apijson:accounts: adminpwd: 123type: usernameheaders:Content-Type: application/json- # 第二个用例request:method: posturl: http:…
阅读更多...
Linux:多线程

Linux:多线程

目录 1.线程的概念 1.1线程的理解 1.2进程的理解 1.3线程如何看待进程内部的资源? 1.4进程 VS 线程 2.线程的控制 2.1线程的创建 2.2线程的等待 2.3线程的终止 2.4线程ID 2.5线程的分离 3.线程的互斥与同步 3.1相关概念 3.2互斥锁 3.2.1概念理解 3.2.2操作理解…
阅读更多...
分类预测 | Matlab实现WOA(海象)-XGboost分类【24年新算法】基于海象优化算法(WOA)优化XGBoost的数据分类预测

分类预测 | Matlab实现WOA(海象)-XGboost分类【24年新算法】基于海象优化算法(WOA)优化XGBoost的数据分类预测

分类预测 | Matlab实现WOA(海象)-XGboost分类【24年新算法】基于海象优化算法(WOA)优化XGBoost的数据分类预测 目录 分类预测 | Matlab实现WOA(海象)-XGboost分类【24年新算法】基于海象优化算法(WOA)优化XGBoost的数据分类预测分类效果基本描述程序设计参考资料 分类效果 基本…
阅读更多...
最新文章

Copyright @ 2022~2023