webpack处理样式资源04--webpack入门学习

处理样式资源

本章节学习使用 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/web/30692.shtml

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

相关文章

osgearth提示“simple.earth: file not handled”

osgearth提示“simple.earth: file not handled”

在用vcpkg编译完osg和osgearth后&#xff0c;为了验证osgearth编译是否正确&#xff0c;进行测试&#xff0c;模型加载代码如下&#xff1a; root->addChild(osgDB::readNodeFile("simple.earth")); 此时以为是simple.earth路径的问题&#xff0c;遂改为以下代码…
阅读更多...
Kithara实时定时器

Kithara实时定时器

管理定时器和实时定时器 目录 管理定时器和实时定时器管理时间数据通用定时器编程初始化计时器删除计时器停止/启动/调整定时器备注RealTimer 备注项目实例项目结构项目源码 示例更多&#xff1a; 管理时间数据 在 Kithara RealTime Suite 中&#xff0c;所有时间值均以 100 ns…
阅读更多...
Pikachu靶场--文件上传

Pikachu靶场--文件上传

参考借鉴 Pikachu靶场之文件上传漏洞详解_皮卡丘文件上传漏洞-CSDN博客 文件上传漏洞&#xff1a;pikachu靶场中的文件上传漏洞通关_pikachu文件上传通关-CSDN博客 client check 在桌面新建一个文件夹&#xff0c;准备一个hello.php文件&#xff0c;文件写入如下代码 <?p…
阅读更多...
产品3D模型在线展示

产品3D模型在线展示

产品3D模型可以向潜在客户提供360度的观察角度&#xff0c;比平面图形的效果更好。快速实现产品3D模型的在线展示最简单的方法是使用老子云3D可视老子云3D可视化的模型内嵌特性&#xff0c;无需任何开发工作&#xff0c;5分钟就可以完成&#xff1a; 老子云的模型内嵌功能&…
阅读更多...
[YOLOv10：注意力机制的轻量化创新，MLCA在目标检测中的卓越表现]

[YOLOv10：注意力机制的轻量化创新，MLCA在目标检测中的卓越表现]

本文改进:一种轻量级的Mixed Local Channel Attention (MLCA)模块，该模块考虑通道信息和空间信息，并结合局部信息和全局信息以提高网络的表达效果。 1.YOLOv10介绍 论文：[https://arxiv.org/pdf/2405.14458] 代码： https://gitcode.com/THU-MIG/yolov10?utm_source=csdn…
阅读更多...
二叉树的基础讲解

二叉树的基础讲解

二叉树在遍历&#xff0c;查找&#xff0c;增删的效率上面都很高&#xff0c;是数据结构中很重要的&#xff0c;下面我们来基础的认识一下。(高级的本人还没学&#xff0c;下面的代码用伪代码或C语言写的)我会从树&#xff0c;树的一些专有名词&#xff0c;树的遍历&#xff0c…
阅读更多...
网页架构实例

网页架构实例

编写一段 html 代码。体现 H5结构性标签&#xff0c;编写一个网页架构的页面。 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-s…
阅读更多...
ROM以及ROM与RAM对比

ROM以及ROM与RAM对比

1.ROM ROM最原始的定义是“只读存储器”&#xff0c;一旦写入原始信息则不能更改。所以ROM通常用来存放固定不变的程序、常数和汉字字库&#xff0c;甚至用于操作系统的固化。它与随机存储器可共同作为主存的一部分&#xff0c;统一构成主存的地址域。 现在已经发展出了很多R…
阅读更多...
PgMP是PMP的进阶版吗?适合哪些人考?

PgMP是PMP的进阶版吗?适合哪些人考?

在PMI系列的众多认证中&#xff0c;PgMP认证和PMP认证是两个具有代表性的项目管理领域的认证&#xff0c;这两个认证均起源于美国&#xff0c;由美国项目管理协会&#xff08;PMI&#xff09;发起。 一、PgMP是PMP的进阶版吗&#xff1f; 是的&#xff0c;PgMP是PMP的进阶版&…
阅读更多...
微服务为什么使用RPC而不使用HTTP通信

微服务为什么使用RPC而不使用HTTP通信

微服务架构中使用RPC&#xff08;Remote Procedure Call&#xff09;而不是HTTP通信&#xff0c;主要是因为RPC在某些方面相比HTTP具有显著的优势。以下是一些关键原因&#xff1a; 性能&#xff1a; RPC通常比HTTP性能更高。RPC协议可以使用二进制序列化格式&#xff08;如gRP…
阅读更多...
PostgreSQL源码分析——备份恢复

PostgreSQL源码分析——备份恢复

在上一篇PostgreSQL源码分析——基础备份中&#xff0c;我们分析了PG中基础备份的过程以及源码&#xff0c;备份与恢复是不分离的&#xff0c;这里我们继续分析一下&#xff0c;从基础备份中进行恢复的源码。 备份过程 执行备份&#xff1a; postgres# select pg_start_back…
阅读更多...
《模拟联合国2.9—团队协作》

《模拟联合国2.9—团队协作》

感谢上海财经大学持续的邀请&#xff0c;今天在阶梯教室举办的《模拟联合国2.0—团队协作》沙盘课程圆满结束。尽管场地的限制带来了一定的挑战&#xff0c;但得益于系统思考中“结构影响行为”的原则&#xff0c;我得以在不同场景中巧妙设计课程结构&#xff0c;极大地促进了大…
阅读更多...
云顶森林的新守护者：大数据平台的智慧力量

云顶森林的新守护者：大数据平台的智慧力量

在遥远的云顶之上&#xff0c;有一片生机盎然的森林&#xff0c;它不仅是动植物的家园&#xff0c;更是自然与人类和谐共生的典范。然而&#xff0c;如何在这片广袤的森林中实施高效、科学的管理&#xff0c;一直是一个摆在管理者面前的难题。幸运的是&#xff0c;随着科技的飞…
阅读更多...
jQuery 样式操作

jQuery 样式操作

3.tab栏切换案例 实现效果&#xff1a; 案例分析&#xff1a; 核心代码&#xff1a; html结构&#xff1a; 4.jQuery类操作与className区别 1.操作css方法 jQuery可以使用Css方法来修改简单元素样式;可以操作类,修改多个样式。 参数只写属性名&#xff0c;则是返回属性值…
阅读更多...
如何在购买的服务器上进行开发工作？

如何在购买的服务器上进行开发工作？

1. 连接服务器 首先需要通过SSH&#xff08;Secure Shell&#xff09;协议连接到服务器。这通常涉及到以下步骤&#xff1a; 使用SSH客户端软件&#xff08;如PuTTY在Windows上&#xff0c;或使用终端在Linux/MacOS上&#xff09;。输入服务器的IP地址或域名输入密码或使用密…
阅读更多...
WordPress插件数据库批量替换内容工具插件

WordPress插件数据库批量替换内容工具插件

1、安装插件后&#xff0c;我们就可以在后台菜单看到工具操作界面 2、目前支持网站内容、标题、评论指定字符的快速替换 3、可以快速解决以往我们需要从MYSQL数据库命令替换的烦恼
阅读更多...
DNF安卓分离仅是开始：游戏厂商积极布局自有渠道，市场变革在即

DNF安卓分离仅是开始：游戏厂商积极布局自有渠道，市场变革在即

毫无征兆&#xff0c;DNF手游今天突然宣布从各大安卓平台下架。 《地下城与勇士:起源》运营团队于6月19日发布声明&#xff0c;指出因合约到期&#xff0c;游戏将不再上架部分安卓平台的应用商店。然而&#xff0c;这一事件并非完全无迹可循。 早在2021年初&#xff0c;华为游…
阅读更多...
51单片机STC89C52RC——2.3 两个独立按键模拟控制LED流水灯方向

51单片机STC89C52RC——2.3 两个独立按键模拟控制LED流水灯方向

目的 按下K1键LED流水向左移动 按下K2键LED流水向右移动 一&#xff0c;STC单片机模块 二&#xff0c;独立按键 2.1 独立按键位置 2.2 独立按键电路图 这里要注意一个设计的bug P3_1 引脚对应是K1 P3_0 引脚对应是K2 要实现按一下点亮、再按一下熄灭&#xff0c;我们就需…
阅读更多...
1688商品详情API：一键解锁海量批发数据

1688商品详情API：一键解锁海量批发数据

引言 1688作为阿里巴巴旗下的B2B交易平台&#xff0c;拥有庞大的商品数据库和丰富的供应商资源。对于想要获取商品详细信息的开发者和企业而言&#xff0c;1688提供的API接口是获取一手数据的关键途径。本文将详细介绍如何使用1688商品详情API&#xff0c;包括注册、获取API密…
阅读更多...
磁盘未格式化深度解析与应对策略

磁盘未格式化深度解析与应对策略

一、认识磁盘未格式化现象 在计算机世界中&#xff0c;磁盘未格式化是一个常见的故障现象。当系统提示磁盘未格式化时&#xff0c;意味着该磁盘或分区上的文件系统结构已损坏或丢失&#xff0c;导致计算机无法正确读取其中的数据。这种情况下&#xff0c;用户通常无法直接访问…
阅读更多...
最新文章

Copyright @ 2022~2023