一文大白话讲清楚webpack基本使用——2——css相关loader的配置和使用

一文大白话讲清楚webpack基本使用——2——css相关loader的配置和使用

1. 建议按文章顺序从头看是看

  • 第一篇:
  • 一文大白话讲清楚啥是个webpack
  • 第二篇:
  • 一文大白话讲清楚webpack基本使用——1——完成webpack的初步构建
  • 然后看本篇,Loader的配置和使用

2. Loader的配置和使用

  • 上一篇文章我们完成了基本的webpack构建,让index.html和main.js关联起来,并成功的在浏览器里面运行了index.html,控制台打印出来了5
  • 这篇讲Loader,先简单回忆一下,Loader的作用就是把非js模块的文件进行转换和处理,以便于webpack能对其像js模块那样完成构建打包
  • 那我们先讲啥呢,当然是CSS,HTML+CSS+javascript那是绝配么
  • 我们上节写了html和js,但没写css,现在我们想加上css样式
  • 我们在src目录下新建一个文件夹stylesheet,用来存放我们的css文件,然后里面创建一个index.css

2.1 css-loader

  • 假设我们希望在index.html上插入一个p标签,给p标签挂上一个class,名字叫’p-loader-css’,设置p标签的字体和颜色
  • 于是我们在index.css里面写样式
.p-loader-css{font-size:18px;color:red
}
  • 定义好样式后,我们在main.js里面创建p标签,并挂在样式
import './stylesheet/index.css'
let p=document.createElement('p')
p.className='p-loader-css'
p.textContent='我是p标签的样式,通过loader处理后被构建'
document.body.appendChild(p)//把p标签插入body里面
  • 这样就完成了p标签的创建和样式添加
  • 我们老规矩,npm运行一下
npm run build
  • 我们可以看到,终端报了一个错误
    在这里插入图片描述

  • 大概意思就是模块转换失败,你可能需要一个loader来处理这类型的文件,目前没有这样的loader可以处理这样的文件,不过好在最后还是打包了,我们运行了一下再说
    在这里插入图片描述

  • 可以发现也是报了同样的错误

  • 为什么呢,因为我们说了,webpack只能对js模块进行构建处理,css模块搞不了,所以需要一个loader来协助处理,那就是css loader

  • css-loader主要处理样式文件中的import和url等语句,不负责将样式注入到HTML页面中,干这个活的另有他人,就是style-loader,负责把转换后的css模块注入到HTMl页面中

  • 所以我们现在需要两个loader来处理上述的问题

  • 先安装

npm install css-loader style-loader
  • 然后再webpack.config.js里面配置loader
module:{//要处理的模块roules:[//不同的规则处理不同的文件,所以是一个数组,每个数组的元素是一个规则对象{test:/\.css$/,//匹配后缀为css的文件,匹配到是使用这条处理规则use:['style-loader','css-loader']//这里有点类似函数式编程,从后往前加载执行}]
}

在这里插入图片描述

  • 配置完我们再次构建
npm run build
  • 发现构建成拱了,我们在浏览器里面运行一下index.html
    在这里插入图片描述

  • 发现css样式添加进来了

  • OK

  • 但是有些情况下我们在开发的时候使用了css预编译语言怎么办呢,不懂预编译语言的,看我这篇文章一文大白话讲清楚CSS预编译语言,包括Sass,Scss,Less,Stylus

  • 没关系,就是再多一个loader的事,假设我们用了scss吧,那就是先把Scss用scss-loader转css,然后用css-loader将css处理,在通过style-loader注入

2.2 sass-Loader

  • 那好,我们在stylesheet目前下新建一个index.scss文件,为刚才的p标签加上红色的边框
$color:red;
.p-border{border:2px solid $color;
}
  • 然后再main.js里面引入index.scss,并给p标签挂载类
import './stylesheet/index.scss'
p.classList.add('p-border')

在这里插入图片描述

  • 然后下载scss-loader和sass
npm install sass-loader sass
  • 然后再webpack.config.js里面配置scss-loader
module:{//要处理的模块roules:[//不同的规则处理不同的文件,所以是一个数组,每个数组的元素是一个规则对象{test:/\.css$/,//匹配后缀为css的文件,匹配到是使用这条处理规则use:['style-loader','css-loader']//这里有点类似函数式编程,从后往前加载执行},{test:/\.scss$/,//匹配后缀为scss的文件use:['style-loader','css-loader','sass-loader']}]
}
  • 配置完我们再次构建
npm run build
  • 允许index.html,发现边框加上了
    在这里插入图片描述

  • 这就OK了

  • 这还有一个问题,就是有时候css3的新属性在一些浏览器上不支持,我们需要加一下前缀保证兼容性,比如加上-webkit-这样的前缀。我们这就需要另外一个postcss-loader和postcss-preset-env

2.3 postcss-Loader和postcss-preset-env

  • 我们安装
npm install postcss-loader postcss-preset-env
  • 然后进行配置
 {test:/\.scss$/,//匹配后缀为scss的文件use:['style-loader','css-loader','sass-loader',{loader:'postcss-loader',options:{postcssOptions:{plugins:[['postcss-preset-env']]}}}]
}

在这里插入图片描述

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

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

相关文章

速通Docker === 网络

目录 Docker网络详解 容器之间直接通信的弊端 (一)启动容器 (二)进入容器并发起请求 (三)请求流程 (四) 弊端分析 一、Docker网络基础 (一)容器IP分配…

Kafka 日志存储 — 日志索引

每个日志分段文件对应两个索引文件:偏移量索引文件用来建立消息偏移量到物理地址之间的映射;时间戳索引文件根据指定的时间戳来查找对应的偏移量信息。 1 日志索引 Kafka的索引文件以稀疏索引的方式构造消息的索引。它并不保证每个消息在索引文件中都有…

空调可视化监控与管理系统

随着智能化技术的不断发展,空调系统作为现代建筑、工业和商业场所的核心设备,正在从传统管理模式向智能化管理迈进。无论是大型商业楼宇、工业厂房,还是数据中心的精密空调,如何通过智能监控和高效管理降低能耗、提升运行效率&…

3.3 OpenAI GPT-4, GPT-3.5, GPT-3 模型调用:开发者指南

OpenAI GPT-4, GPT-3.5, GPT-3 模型调用:开发者指南 OpenAI 的 GPT 系列语言模型,包括 GPT-4、GPT-3.5 和 GPT-3,已经成为自然语言处理领域的标杆。无论是文本生成、对话系统,还是自动化任务,开发者都可以通过 API 调用这些强大的模型来增强他们的应用。本文将为您详细介…

用户中心项目教程(五)---MyBatis-Plus完成后端初始化+测试方法

文章目录 1.数据库的链接和创建2.建库建表语句3.引入依赖4.yml配置文件5.添加相对路径6.实体类的书写7.Mapper接口的定义8.启动类的指定9.单元测试10运行时的bug 1.数据库的链接和创建 下面的这个就是使用的我们的IDEA链接这个里面的数据库: 接下来就是输入这个用户…

Azure Synapse Dedicated SQL Pool实用命令语句

一、数据管理相关命令 1. 数据加载 COPY 命令&#xff1a;用于从外部存储&#xff08;如 Azure Blob 存储&#xff09;加载数据到 Dedicated SQL Pool 中。 COPY INTO [dbo].[target_table] FROM https://<storage_account>.blob.core.windows.net/<container>/…

products页面出现多选框后,能够直接将勾选的products删除吗?而不用跳转到flow再删除。例如将勾选的products传给flow

在标准的「Opportunity Products」(机会产品) 相关列表上&#xff0c;Salesforce 并不直接支持多选后一次性删除的功能。如果你想要在“同一页面”直接勾选然后删除&#xff0c;而不跳转到单独的 Flow 界面&#xff0c;通常需要借助自定义开发的方式来实现。下面给你几种可行的…

AI软件栈:中间表示

概念 编译器通常可以分为前端、优化器和后端三个部分中间表示属于变异过程中表达源程序的方法,作为单独的表示语言。将不同的前端语言(例如C、python、Java等)描述转换为中间表示。优化器对中间表示进行转换和优化,输出新的中间表示。后端将优化后的中间表示转换为特定硬件…

C++:深入理解const_iterator的应用

在 C 的标准模板库&#xff08;STL&#xff09;中&#xff0c;迭代器&#xff08;iterator&#xff09;是操作容器的重要工具&#xff0c;用于在容器的元素上进行遍历或操作。const_iterator 是迭代器的一种&#xff0c;用于只读访问容器中的元素&#xff0c;而不能修改它们的值…

LeetCode hot 力扣热题100 二叉树的最大深度

class Solution { public:int maxDepth(TreeNode* root) {if (root nullptr) {return 0;}int l_depth maxDepth(root->left);int r_depth maxDepth(root->right);return max(l_depth, r_depth) 1;} }; 代码作用 该函数通过递归计算二叉树的最大深度&#xff08;从根节…

Mysql InnoDB B+Tree是什么?

“mysql中常用的数据库搜索引擎InnoDB,其索引通过BTree的方式进行构建。” 实在想不起来BTree是怎么一回事了。以点带线&#xff0c;将涉及到的数据结构一起复习一下。 文章目录 数据结构定义红黑树定义使命 BTree定义使命 BTree定义 InnoDB BTree 旋转与调整二叉排序树插入删…

MATLAB基础应用精讲-【数模应用】粒子群与遗传算法相结合(PSO-GA)应用(附MATLAB代码实现)

目录 前言 几个高频面试题目 遗传算法、粒子群优化算法和强化学习对比 1 遗传算法(Genetic Algorithm, GA) 2 粒子群优化算法(Particle Swarm Optimization, PSO) 3 强化学习(Reinforcement Learning, RL) 4 遗传算法、粒子群优化算法和强化学习在智能方面的比较。…

对人型机器人的研究和展望

目录 概述 1 核心软硬件部件 1.1 运动控制部分 1.1.1 减速机 1.1.2 编码器 1.1.3 直流无刷电机 1.2 智能仿生手 1.3 控制板卡 2 人型机器人的应用 3 未来展望 概述 如果现在有人问&#xff1a;当前那个行业最火&#xff1f;毫无疑问答案肯定是人型机器人了。当前各类机…

Flask:后端框架使用

文章目录 1、介绍2、demo演示3、Flask请求和响应 3.1 演示demo3.2 request获取请求体数据3.3 requests发送请求3.4 响应返回和接收 4、特殊路由 4.1 路由重定向4.2 路由拦截器 1、介绍 Flask是由python语言编写的轻量级Web应用框架&#xff0c;主要应用于后端框架&#xff…

递归算法学习v2.3

目标和 设置全局变量&#xff1a; class Solution {int ret,path,aim;public int findTargetSumWays(int[] nums, int target) {aim target;dfs(nums,0);return ret;}public void dfs(int[] nums,int pos){if(pos nums.length){if(path aim){ret ;}return;}path nums[pos…

红黑树封装map和set(c++版)

前言 在前面&#xff0c;我们介绍了c中map和set库的使用&#xff0c;也实现了一颗简单的红黑树。那么现在我们就利用这两部分的知识&#xff0c;实现一个简单的myMap和mySet。 源码阅读 在我们实现之前&#xff0c;我们可以阅读一些标准库的实现&#xff0c;学习标准库的实现…

Windows 服务程序实现鼠标模拟

cpp #include <windows.h> #include <fstream> #include <string> #include <tchar.h> #include <thread> #include <vector> #define SERVICE_NAME _T("MouseSimulationService") // 全局变量 SERVICE_STATUS g_Servi…

ui设计公司分享:浅色 UI 设计

在数字化产品琳琅满目的今天&#xff0c;用户对于界面的要求早已不止于功能的实现&#xff0c;更追求一种舒适、无压的交互体验。而浅色UI设计&#xff0c;凭借其独特的魅力&#xff0c;正逐渐成为众多设计师营造优质体验的首选。 一、浅色UI设计的视觉优势 &#xff08;一&a…

Nacos:使用PgSQL数据源

数据源插件开源仓库地址&#xff1a;nacos-datasource-extend-plugins 一、PostgreSQL数据库安装 1、本文使用Docker进行数据库的安装&#xff0c;使用docker命令拉取的PG14版本的数据库&#xff1a; docker pull postgres:14.6 2、创建PG容器并启动&#xff0c;映射了5432…

Linux——入门基本指令汇总

目录 1. ls指令2. pwd3. whoami指令4. cd指令5. clear指令6. touch指令7. mkdir指令8. rm指令9. man指令10. cp指令11. mv指令12. cat指令13. tac指令14. more指令15. less指令16. head指令17. tail指令18. date指令19. cal指令20. find指令21. which指令22. alias指令23. grep…