【构建工具】PostCSS快速配置

1. 安装依赖包
npm i -D postscss postcss-cli
npm i -D autoperfixer postcss-preset-env 
npm i -D stylelint stylelint-config-standard
npm i -D postcss-pxtorem// 执行命令 npx postcss style.css -o dist.css
  1. postcss // PostCSS核心包
  2. postcss-cli // PostCSS命令行
  3. autoprefixer // autoprefixer插件
  4. postcss-preset-env // preset-env插件,转换嵌套css语法
  5. stylelint // 检查css语法的插件
  6. stylelint-config-standard // stylelint一些基本的规则
  7. postcss-pxtorem // 将px单位转换成rem
2. PostCSS配置
// postcss.config.js
const autoprefixer = require('autoprefixer');
const postcssPresetEnv = require('postcss-preset-env');
const stylelint = require('stylelint');
const postcssPxtorem = require('postcss-pxtorem')module.exports = {plugins: [stylelint,autoprefixer,postcssPresetEnv({stage: 0,}),postcssPxtorem,]
}.stylelintrc.json
{"extends": "stylelint-config-standard"
}// .browserslistrc
cover 99.5%
3. 总结 

        浏览器兼容性是前端开发常遇到的问题,现代前端构建工具已经可以帮我们处理很多兼容问题,比如:Babel语法转换和polyfill可以解决JavaScript层面的大部分兼容问题,而PostCSS的autoprefixer以及语法转换可以解决CSS层面的大部分兼容问题。

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

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

相关文章

专业无网设备如何远程运维?向日葵远程控制能源场景案例解析

清洁能源领域,拥有庞大的上下游产业链,涉及的相关工业设备门类多、技术覆盖全、行业应用广。在这一领域内,相关专业设备的供应商的核心竞争力除了本身产品的技术能力之外,服务也是重要的一环。 某企业作为致力于节能环保方向的气…

由浅到深认识C语言(7)

该文章Github地址:https://github.com/AntonyCheng/c-notes 在此介绍一下作者开源的SpringBoot项目初始化模板(Github仓库地址:https://github.com/AntonyCheng/spring-boot-init-template & CSDN文章地址:https://blog.csdn…

云仓酒庄东莞分公司2024年日常沙龙:葡萄酒文化与品鉴之旅

原标题:云仓酒庄东莞分公司日常沙龙:葡萄酒文化与品鉴之旅,招商新机遇共融 在东莞这座充满活力的城市,云仓酒庄分公司近日举办了一场别开生面的日常沙龙活动。此次活动以葡萄酒文化与品鉴为主题,旨在让参与者深入体验…

Typecho CMS 反序列化漏洞(CVE-2018-18753)复现

1.环境搭建 项目地址:Release Typecho 1.0(14.10.10) typecho/typecho GitHub 安装: 创建数据库typecho create database typecho; 再进入安装程序,输入数据库密码,设置登录密码即可 直接使用即可 2.漏洞分析 install.php文…

[善用佳软]推荐掌握小工具:Json解析的命令行工具jq

前言: 我们在各种生产环境或者开发测试环境中,一定遇到有很多信息都是使用JSON串或者文本文件作为输入的。在没有JQ命令行工具之前,我们要从中获取真正的输入,大都把它复制到文本里头,然后使用文本编辑器进行加工整理…

PytorchAPI的使用及在GPU的使用和优化

API 调用API:和手动实现的思路是一样的。#1,#2这两个步骤是通用的步骤,相当于建立一个模型,之后你具体的数据直接丢进去就行了。只需要按着这样的样式打代码就行,死的东西,不需要你自己创造。 import torc…

【博士每天一篇文献-综述】Communication dynamics in complex brain networks

阅读时间:2023-11-30 1 介绍 年份:2018 作者:Andrea Avena-Koenigsberger,印第安纳大学心理与脑科学系;Bratislav Misic 蒙特利尔神经学研究所,麦吉尔大学 期刊: Nature reviews neuroscience…

【Linux进阶之路】HTTPS = HTTP + S

文章目录 一、概念铺垫1.Session ID2.明文与密文3.公钥与私钥4.HTTPS结构 二、加密方式1. 对称加密2.非对称加密3.CA证书 总结尾序 一、概念铺垫 1.Session ID Session ID,即会话ID,用于标识客户端与服务端的唯一特定会话的标识符。会话,即客…

基于DataX迁移MySQL到OceanBase集群

📢📢📢📣📣📣 哈喽!大家好,我是【IT邦德】,江湖人称jeames007,10余年DBA及大数据工作经验 一位上进心十足的【大数据领域博主】!😜&am…

go和rust使用protobuf通信

先下载protoc 首先下载proc程序以生成代码 https://github.com/protocolbuffers/protobuf/releases 解压,然后把bin目录的位置放到环境变量 测试 rust作为server,rpc使用tonic框架 官方教程 go作为service,使用grpc go语言使用grpc 效…

Xilinx LVDS ISERDESE2

ISERDESE2 7 系列 FPGA 是一款专用的串行到并行转换器,具有特定的时钟和逻辑功能,旨在促进高速源同步应用的实现。该ISERDESE2避免了在FPGA架构中设计解串器时遇到的额外时序复杂性. ISERDESE2功能包括: 1,专用解串器/串行转换器 ISERDESE2解串器可实现高速数据传输,而无需…

FPGA静态时序分析与约束(四)、时序约束

系列文章目录 FPGA静态时序分析与约束(一)、理解亚稳态 FPGA静态时序分析与约束(二)、时序分析 FPGA静态时序分析与约束(三)、读懂vivado时序报告 文章目录 系列文章目录前言一、什么是时序约束&#xff1…

C++/CLI学习笔记10(快速打通c++与c#相互调用的桥梁)

1:理解局部和全局作用域 函数体中定义的局部变量的作用域:它们在函数执行期间创建,在函数结束时自动销毁。这意味着不同函数中的同名变量不会冲突。 还可在所有函数外部声明全局变量。全局变量在之后的所有函数定义中可见。可利用这种变量在多个函数之间共享信息。 全局变…

【JavaEE -- 多线程3 - 多线程案例】

多线程案例 1.单例模式1.1 饿汉模式的实现方法1.2 懒汉模式的实现方法 2. 阻塞队列2.1 引入生产消费者模型的意义:2.2 阻塞队列put方法和take方法2.3 实现阻塞队列--重点 3.定时器3.1 定时器的使用3.2 实现定时器 4 线程池4.1 线程池的使用4.2 实现一个简单的线程池…

【XR806开发板试用】基于WEBSOCKET实现人机交互(控制开关灯)以及开发问题记录

一、开发板编译、功能介绍 根据官方文档编译烧录成功后,我们修改下官方例子,进行开发来实现websocket。 整体流程:开发板先自动寻找指定的wifi并且连接,连接成功后,通过websocket来与服务端连接,连接成功后…

【SVG】前端-不依靠第三方包怎么画连线???

如何用SVG实现连线功能 在Web开发中,我们经常会遇到需要在页面上绘制图形或者实现一些图形交互的场景。SVG(Scalable Vector Graphics)作为一种用于描述二维图形的XML标记语言,在这方面提供了极大的便利。本文将以一个具体的例子…

【 React 】对React refs的理解?应用场景?

1. 是什么 Refs在计算机中称为弹性文件系统(英语:Resilient File System,简称ReFS) React中的Refs提供了一种方式,允许我们访问DOM节点或在render方法中创建的React元素 本质为ReactDOM.render()返回的组件实例,如果是渲染组件则返回的是组件…

蜡烛图K线图采用PictureBox控件绘制是实现量化交易的第一步非python量化

用vb6.0开发的量化交易软件 VB6量化交易软件的演示视频演示如上 股票软件中的蜡烛图是非常重要的一个东西,这里用VB6.0自带的Picture1控件的Line方法就可以实现绘制。 关于PictureBox 中的line 用法 msdn 上的说明为如下所示 object.Line [Step] …

LabVIEW电液伺服作动器

LabVIEW电液伺服作动器 随着工业自动化技术的快速发展,电液伺服作动器在各类精密控制领域得到了广泛应用。基于CRIO架构,利用LabVIEW软件开发了一套电液伺服作动器测控系统,实现了高精度的位移同步控制与测量,有效提高了系统的控…

3.Gen<I>Cam文件配置

Gen<I>Cam踩坑指南 我使用的是大恒usb相机&#xff0c;第一步到其官网下载大恒软件安装包,安装完成后图标如图所示&#xff0c;之后连接相机&#xff0c;打开软件&#xff0c;相机显示一切正常。之后查看软件的安装目录如图&#xff0c;发现有GenICam和GenTL两个文件&am…