解决 webpack 4.X:autoprefixer 插件使用不起作用的两种解决方案

news2024/11/25 15:13:55

1、问题描述:

其一、存在的问题为:

加载 autoprefixer 插件的过程中,页面却显示并没有自动添加浏览器的厂商前缀;

其二、问题描述为:

在写 CSS3 这些新的特性时,存在着不同的浏览器解析这些新特性时,需要在新特性前加上厂商前缀的(即:autoprefixer 插件的作用),能提高了我们的开发效率,但是此时页面并没有加上厂商的前缀;

2、问题分析:

根据问题描述可知,由于 autoprefixer 插件的配置或版本的问题导致了 autoprefixer 插件并没有起作用;

3、问题解决:

方案一、在项目目录下创建 postcss.config.js 文件:

其一、代码为:

// 在 postcss.config.js 中的配置 autoprefixer 的情况如下:
module.exports = {
  plugins: [ // 即:需要在 postcss.config.js 中配置 autoprefixer 这个插件(注意:此时的配置单词是 plugins,不要写成 plugin,否则一直报错,还找不到报错在哪里);
    require('autoprefixer')({
      browsers: ['Android >= 4.0', 'iOS >= 7']
      // overrideBrowserslist: ['ie > 9', 'last 2 versions']
    })
    // require('autoprefixer')
  ]
}

其二、警告的图片:

在这里插入图片描述

其三、警告的代码:

  Replace Autoprefixer browsers option to Browserslist config.
  Use browserslist key in package.json or .browserslistrc file.

  Using browsers option can cause errors. Browserslist config
  can be used for Babel, Autoprefixer, postcss-normalize and other tools.

  If you really need to use option, rename it to overrideBrowserslist.

  Learn more at:
  https://github.com/browserslist/browserslist#readme
  https://twitter.com/browserslist
  

方案二、直接在项目中的 package.json 中配置相关信息:

其一、代码为:

"browserslist": [
    "defaults",
    "not ie < 11",
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
  ]
  
其二、图片展示为:

在这里插入图片描述

4、小结:

其一、哪里有不对或不合适的地方,还请大佬们多多指点和交流!
其二、若有转发或引用本文章内容,请注明本博客地址(直接点击下面 url 跳转) https://blog.csdn.net/weixin_43405300,创作不易,且行且珍惜!
其三、有兴趣的话,可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)(直接点击下面 url 跳转):https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482

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

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

相关文章

学习package.json

package.json 文件&#xff0c;它是项目的配置文件&#xff0c;常见的配置有配置项目启动、打包命令&#xff0c;声明依赖包等。package.json 文件是一个 JSON 对象&#xff0c;该对象的每一个成员就是当前项目的一项设置。 {"name": "monorepo_frame",&q…

FTP服务器操作手册

FTP服务器(File Transfer Protocol Server)是在互联网上提供文件存储和访问服务的计算机&#xff0c;它们依照FTP协议提供服务。FTP协议是File Transfer Protocol(文件传输协议)&#xff0c;专门用来传输文件的协议。FTP服务器是企业里经常用到的服务器&#xff0c;今天就介绍一…

RGB与YUV公式转换推导

目录 简介 Full Range公式推导 Limit Range推导 验证测试 参考资料 简介 RGB与YUV之间的转换有很多种标准&#xff0c;不同标准系数不一样&#xff0c;而且经常容易搞混淆&#xff0c;另外还有full range和limitrange的不同。其实这些转换系数都是推导出来的&#xff0c;…

【通览一百个大模型】Baize(UCSD)

【通览一百个大模型】Baize&#xff08;UCSD&#xff09; 作者&#xff1a;王嘉宁&#xff0c;本文章内容为原创&#xff0c;仓库链接&#xff1a;https://github.com/wjn1996/LLMs-NLP-Algo 订阅专栏【大模型&NLP&算法】可获得博主多年积累的全部NLP、大模型和算法干货…

【数据结构与算法】two X 树的遍历以及功能实现

前言&#xff1a; 前面我们已经提到过树、二叉树的概念及结构、堆排序、Top-k问题等的知识点&#xff0c;这篇文章我们来详解一下二叉树的链式结构等问题。 &#x1f4a5;&#x1f388;个人主页:​​​​​​Dream_Chaser&#xff5e; &#x1f388;&#x1f4a5; ✨✨专栏:htt…

JVM工具使用(jstat + jmap)

命令格式 jstat -gcutil pid interval(ms) 举例&#xff1a; jstat -gcutil 16361 1000 线上服务器的GC情况如下&#xff1a; 参数说明如下&#xff1a; S0: 新生代中Survivor space 0区已使用空间的百分比S1: 新生代中Survivor space 1区已使用空间的百分比E: 新生代已使用空…

ETL实现实时文件监听

一、实时文件监听的作用及应用场景 实时文件监听是一种监测指定目录下的文件变化的技术&#xff0c;当产生新文件或者文件被修改时&#xff0c;可实时提醒用户并进行相应处理。这种技术广泛应用于数据备份、日志管理、文件同步和版本控制等场景&#xff0c;它可以帮助用户及时…

Nacos 下载运行及配置

Nacos 服务注册与配置中心&#xff0c;兼顾两者 文章目录 Nacos 服务注册与配置中心&#xff0c;兼顾两者一、简介二、相关文档2.1 Nacos官网2.2 官方文档 三、下载并运行Nacos3.1 下载压缩包3.2 解压缩3.3 运行命令3.4 访问Nacos控制台 附录&#xff1a;各种注册中心比较 Naco…

CAS是“Compare and Swap“(比较并交换)

CAS是"Compare and Swap"&#xff08;比较并交换&#xff09; 一&#xff0c;介绍 CAS是"Compare and Swap"&#xff08;比较并交换&#xff09;的缩写&#xff0c;是一种多线程同步的原子操作。它基于硬件的原子性保证&#xff0c;用于解决并发环境下的…

在前台页面中console怎么查vue.prototype

在测试项目接口时发现调用接口调用异常&#xff0c;怀疑可能是网省配置问题 1. 打开前台页面。 2. 右键点击页面&#xff0c;选择"检查元素"或者"审查元素"。 3. 在打开的开发者工具中&#xff0c;选择"控制台"选项卡。 4. 在控制台中输入以下代…

TCP通信实战案例-即时通信

即时通信是什么含义&#xff0c;要实现怎么样的设计&#xff1f; 即时通信&#xff0c;是指一个客户端的消息发出去&#xff0c;其他客户端可以接收到。 即时通信需要进行端口转发的设计思想。 服务端需要把在线的Socket管道存储起来。 一旦收到一个消息要推送给其他管道。…

05-01 jdk,tomcat,mariadb数据库和profile多环境

1.卸载系统默认安装jdk # java -version # rpm -qa|grep openjdk -i # rpm - e --nodeps 需要删除的软件2.安装jdk 2.1新建jdk安装目录并解压 # mkdir /usr/java # cd /usr/ # tar -zxvf jdk-8u191-linux-x64.tar.gz # mv jdk-8u191/ /usr/java/2.2配置环境变量 # vim /etc/…

【Javascript】等于与全等于

var a1;if(a1){console.log(你好&#xff01;&#xff01;);} 如果a赋值为 1 的时候 var a1;if(a1){console.log(你好&#xff01;&#xff01;);}仍然会执行 console.log(你好&#xff01;&#xff01;); 所以在开发中如果if语句里要使用等于的时候使用 var a1;if(a1)…

编程小白的自学笔记十七(python办公自动化操作EXCEL表格之作图)

系列文章目录 编程小白的自学笔记十六&#xff08;python办公自动化操作EXCEL表格&#xff09; 编程小白的自学笔记十五&#xff08;python办公自动化操作EXCEL表格&#xff09; 编程小白的自学笔记十四&#xff08;python办公自动化创建、复制、移动文件和文件夹 编程小白…

Qt 项目实战 | 多界面编辑器

Qt 项目实战 | 多界面编辑器 Qt 项目实战 | 多界面编辑器界面设计创建子窗口类 官方博客&#xff1a;https://www.yafeilinux.com/ Qt开源社区&#xff1a;https://www.qter.org/ 参考书&#xff1a;《Qt 及 Qt Quick 开发实战精解》 Qt 项目实战 | 多界面编辑器 开发环境&…

运行segment anything模型的web demo 教程

这个web应用放在在源码的demo文件夹里&#xff1a; 这个前端仅基于React的web演示了如何加载固定图像和相应的SAM image embedding的.npy文件。 运行需要配置npm环境。 首先导出onnx的模型&#xff1a; import torch import numpy as np import cv2 import matplotlib.pyplo…

解决 Vue3 + Element Plus 树形表格全选多选以及子节点勾选的问题

原文链接&#xff1a; 解决 Vue3 Element Plus 树形表格全选多选以及子节点勾选的问题 前言 最近用到了 Element Plus 组件库的中的树形表格&#xff0c;但官网例子只能做到一层勾选&#xff0c;不能做到多层勾选&#xff0c;无法满足业务需求&#xff0c;所以研究了下&#…

PHP 预定义超全局变量 笔记/练习

预定义超全局数组变量 $_FILES 练习在最后 其他练习跟在每条笔记后 概述 预定义&#xff1a;预定义变量是 PHP 已定义&#xff0c;可以直接使用超全局&#xff1a;作用域是全局&#xff0c;可以在脚本的任何地方&#xff08;包括函数内部、外部&#xff09;都可以进行访问 常…

CSS必学:你需要知道的盒子模型的秘密

作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 &#x1f449; WangMin 作为前端开发来说&#xff0c;要掌握的CSS基础一定很多&#xff0c;那么CSS中盒子模型肯定是必考必问必掌握的前端知识点&#xff0c;因为它是CSS基础中非常重要的内容&#xff0c;…

分步实现编写LED驱动,实现特备文件和设备的绑定

通过字符设备驱动的分步实现编写LED驱动&#xff0c;另外实现特备文件和设备的绑定&#xff0c;发布到CSDN head.h #ifndef __HEAD_H__ #define __HEAD_H__ typedef struct {unsigned int MODER;unsigned int OTYPER;unsigned int OSPEEDR;unsigned int PUPDR;unsigned int ID…