webpack如何处理浏览器的样式兼容问题postcss

一、准备工作

css/index.css添加样式

.word {color: red;user-select: none;
}

 为了兼容不同的浏览器我们需要添加前缀比如:

-webkit-user-select: none;

这个工作可以通过postcss的插件postcss-preset-env处理

 二、安装依赖
pnpm i -D postcss postcss-loader postcss-preset-env

postcss其他插件可以查看 

PostCSS 插件指南 | PostCSS

三、webpack配置
webpack.config.js
const path = require("path");/*** 类型提示* @type {import("webpack").Configuration}*/
const config = {entry: "./src/index.js",output: {filename: "build.js",path: path.resolve(__dirname, "./build"),},module: {rules: [{test: /\.css$/, //正则匹配文件use: [{loader: "style-loader",},{loader: "css-loader",},{loader: "postcss-loader",options: {postcssOptions: {plugins: ["postcss-preset-env"],},},},],},],},
};
module.exports = config;
postcss.config.js

优点是不用重复配置

module.exports = {plugins: [require("postcss-preset-env")],
};

然后打包npm run build,我们的样式就添加了前缀

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

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

相关文章

接口测试用例编写和接口测试模板

一、简介 接口测试区别于传统意义上的系统测试,下面介绍接口测试用例和接口测试报告。 二、接口测试用例模板 功能测试用例最重要的两个因素是测试步骤和预期结果,接口测试属于功能测试,所以同理。接口测试的步骤中,最重要的是将…

MySQL中的JOIN与IN:性能对比与最佳实践

文章目录 JOIN与IN的基本介绍JOININ JOIN与IN性能对比使用JOIN的查询使用IN的查询 何时使用JOIN何时使用IN性能优化的其他考虑因素总结 🎉MySQL中的JOIN与IN:性能对比与最佳实践 ☆* o(≧▽≦)o *☆嗨~我是IT陈寒🍹✨博客主页:IT陈…

nginx: [error] open() “/usr/local/openresty/nginx/logs/nginx.pid“ failed (2:

错误原因:nginx: [error] open() "/usr/local/nginx/logs/nginx.pid" failed (2: No such file or directory),logs目录下缺少pid文件。 解决方法: 使用指定nginx.conf文件的方式重启nginx roothadoop100 conf]# /usr/local/openr…

<蓝桥杯软件赛>零基础备赛20周--第8周第1讲--十大排序

报名明年4月蓝桥杯软件赛的同学们,如果你是大一零基础,目前懵懂中,不知该怎么办,可以看看本博客系列:备赛20周合集 20周的完整安排请点击:20周计划 每周发1个博客,共20周(读者可以按…

香港服务器运行缓慢的原因是什么_Maizyun

香港服务器运行缓慢的原因是什么? 随着互联网的蓬勃发展,越来越多的企业和个人选择使用香港服务器来托管他们的网站或应用程序。 不过,在使用过程中,你可能会遇到一些问题,其中最常见的就是香港服务器运行缓慢。 本文…

Java中的单元测试,反射和枚举

知识模块 一.Junit单元测试 二.反射 三.枚举一.Junit单元测试a.概述Junit是一种Java写的单元测试框架,专门用来测试Java程序,它可以取代main方法b.Junit环境搭建由于Junit使用的类不属于我们JDK的类库,需要引入第三方jar包才能使用c.Junit使用…

身份验证和电子邮件的网络安全即将迎来地震

任何拥有 Gmail 或 Yahoo 电子邮件帐户的人都清楚,如果不是明确的欺诈企图,他们的收件箱中可能充满了未经请求的邮件。 这些服务的用户很可能多次想知道他们的提供商是否可以采取措施至少减少垃圾邮件的数量以及随之而来的诈骗风险。 好消息是&#xf…

AI查gdb使用

AI查询了一波GDB的使用,发现基础的命令还是很够的,不过给的都是全称,实际使用时都是用首字母查询问题的。 gdb是GNU调试器,是一种基于命令行的调试工具,可以用于调试C、C、Fortran、Assembly等编程语言编写的程序&…

多模态大模型总结1(2021和2022年)

常用损失函数 ITC (image-text contrasctive loss) CLIP中采用的对比损失,最大化配对文本对的余弦相似度,最小化非配对文本对的余弦相似度,采用交叉熵损失实现 MLM (masked language modeling&#xff0…

Elasticsearch 相似度评分模型介绍

前言 Elasticsearch 是基于 Lucene 的世界范围内最流行的全文检索框架,其文档相似度算法包含 TF/IDF 和 BM25,从 ES 5.0开始 BM25 算法已经成为 ES 默认的相似度评分模块。 TF-IDF 与 BM25 的区别 TF-IDF 和 BM25 都是计算文本相似性的常用算法。TF-ID…

ESP32-S3 上电不断输出invalid header: 0xffffffff

现象如下: ESP-ROM:esp32s3-20210327 Build:Mar 27 2021 rst:0x1 (POWERON),boot:0x8 (SPI_FAST_FLASH_BOOT) invalid header: 0xffffffff invalid header: 0xffffffff invalid header: 0xffffffff invalid header: 0xffffffff 原因:芯片内部固件问题…

统计英语单词

使用Scanner类和正则表达式统计一篇英文中的单词,要求如下: 1、一共出现了多少个单词。 2、有多少个互不相同的单词。 3、按单词出现的频率大小输出单词。 package 第七次; import java.util.*; import java.io.*; import java.util.regex.*;public …

人工智能助力医疗:科技护航健康未来

欢迎大家浏览我的博客。YinKais Blog | YinKais Blog 人工智能的魔法不仅仅体现在解决问题、提供建议的方面,更深刻地改变了医疗领域,成为我们健康的科技守护者。本文将聚焦于人工智能在医疗领域的应用,探讨它是如何助力医疗事业,…

重生奇迹mu召唤师攻略

一、技能系统 1、技能大类:召唤师主要有火焰职业技能和水元素技能。 2、火焰职业技能:主要是使用火焰元素进行攻击,可以攻击单个目标,也可以同时攻击多个目标。 3、水元素技能:主要是对多个敌方单位使用水元素&…

在 Spring Boot 中使用 MyBatis-Plus 进行批量操作数据

引言 MyBatis-Plus 是 MyBatis 的增强工具包,提供了许多便捷的功能来简化 MyBatis 的使用。在实际项目中,我们经常需要进行批量的数据操作,例如批量插入、批量更新和批量删除。本文将介绍如何在 Spring Boot 中使用 MyBatis-Plus 进行这些批…

ZFPlayer 播放视频的时候的视图层级

未播放的时候 首先看正常展示的时候,还没又开始播放 这个时候我们打开图层看一下,发现视频时长和播放按钮都是放在 视频封面图上的 播放的时候 我们看到的播放视频的画面 我们发现,我们之前在未播放状态看到的视图,仍然还在…

Linux入门

什么是Linux? Linux是一种免费、开源的操作系统内核 最初由芬兰计算机科学家 李纳斯托瓦兹 (Linus Torvalds)在1991年创建 Linux内核最初是为个人电脑设计的,如今已普及到服务器、超级计算机、移动设备等各种硬件平台 由于Linux是自由软件(自…

logcat日志的使用——Qt For Android

前言 最近一直用qt开发安卓app,一直无法用真机调试,可能是缺什么东西。但是如果通过Qt Creator在真机上运行,可以在电脑控制台看打印(安卓本身的日志、qDebug之类的打印),所以我是通过打印猜测问题所在&am…

在零信任架构下的API安全与滥用防护(上)

引言 在当今数字化的浪潮中,应用程序编程接口(API)的战略重要性愈发凸显。API不仅仅是现代软件和互联网服务之间沟通的桥梁,更是企业价值创造的核心。随着API的快速发展和广泛应用,安全问题随之而来,其中A…

连锁零售企业如何提高异地组网的稳定性?

随着数字化时代的到来,连锁零售企业面临着日益复杂和多样化的网络挑战。连锁零售企业是在不同地理位置拥有分支机构和零售店,可能同城或异地,需要确保各个地点之间的网络连接稳定和可靠。但由于不同地区的网络基础设施差异、网络延迟和带宽限…