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…
阅读更多...
ROM以及ROM与RAM对比

ROM以及ROM与RAM对比

1.ROM ROM最原始的定义是“只读存储器”&#xff0c;一旦写入原始信息则不能更改。所以ROM通常用来存放固定不变的程序、常数和汉字字库&#xff0c;甚至用于操作系统的固化。它与随机存储器可共同作为主存的一部分&#xff0c;统一构成主存的地址域。 现在已经发展出了很多R…
阅读更多...
《模拟联合国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;则是返回属性值…
阅读更多...
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;我们就需…
阅读更多...
磁盘未格式化深度解析与应对策略

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

一、认识磁盘未格式化现象 在计算机世界中&#xff0c;磁盘未格式化是一个常见的故障现象。当系统提示磁盘未格式化时&#xff0c;意味着该磁盘或分区上的文件系统结构已损坏或丢失&#xff0c;导致计算机无法正确读取其中的数据。这种情况下&#xff0c;用户通常无法直接访问…
阅读更多...
【Liunx】基础开发工具的使用介绍-- yum / vim / gcc / gdb / make

【Liunx】基础开发工具的使用介绍-- yum / vim / gcc / gdb / make

前言 本章将介绍Linux环境基础开发工具的安装及使用&#xff0c;在Linux下安装软件&#xff0c;编写代码&#xff0c;调试代码等操作。 目录 1. yum 工具的使用1.1 什么是软件包&#xff1a;1.2 如何下载软件&#xff1a;1.3 配置国内yum源&#xff1a; 2. vim编辑器2.1 vim的安…
阅读更多...
【CT】LeetCode手撕—54. 螺旋矩阵

【CT】LeetCode手撕—54. 螺旋矩阵

目录 题目1- 思路2- 实现⭐54. 螺旋矩阵——题解思路 3- ACM实现 题目 原题连接&#xff1a;92. 反转链表 II 1- 思路 模式识别&#xff1a;螺旋矩阵 ——> 用四个指针来顺时针遍历 2- 实现 ⭐54. 螺旋矩阵——题解思路 class Solution {public List<Integer> spir…
阅读更多...
目标检测——轮胎纹理图像识别技术：从数据到应用全解析

目标检测——轮胎纹理图像识别技术：从数据到应用全解析

引言 亲爱的读者们&#xff0c;您是否在寻找某个特定的数据集&#xff0c;用于研究或项目实践&#xff1f;欢迎您在评论区留言&#xff0c;或者通过公众号私信告诉我&#xff0c;您想要的数据集的类型主题。小编会竭尽全力为您寻找&#xff0c;并在找到后第一时间与您分享。 一…
阅读更多...
哈喽GPT-4o——对GPT-4o 编程的思考与看法

哈喽GPT-4o——对GPT-4o 编程的思考与看法

GPT-4o&#xff08;“o”代表“全能”&#xff09;它可以接受任意组合的文本、音频和图像作为输入&#xff0c;并生成任意组合的文本、音频和图像输出。 &#x1f449; GPT功能&#xff1a; GPT-4o知识问答&#xff1a;支持1000token上下文记忆功能最强代码大模型Code Copilo…
阅读更多...
ctr/cvr预估之FM模型

ctr/cvr预估之FM模型

ctr/cvr预估之FM模型 在数字化时代&#xff0c;广告和推荐系统的质量直接影响着企业的营销成效和用户体验。点击率&#xff08;CTR&#xff09;和转化率&#xff08;CVR&#xff09;预估作为这些系统的核心组件&#xff0c;其准确性至关重要。传统的机器学习方法&#xff0c;如…
阅读更多...
微信公众号绑定开发者后端，报错“系统发生错误，请稍后重试”的坑

微信公众号绑定开发者后端，报错“系统发生错误，请稍后重试”的坑

一、问题描述 在公众号后端填写完基本配置&#xff0c;点击保存&#xff0c;发现提示“系统发生错误&#xff0c;请稍后重试”。联系公众号客服回复&#xff0c;涉及开发内容不给支持-_-|| 二、经多次百度&#xff0c;结合实际尝试&#xff0c;总结解决方案如下&#xff1a;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023