postcss安装和使用(详细)

1,安装postcss:

在此之前需要安装有node.js 

第一步 命令:cnpm install postcss-cli -g

   第二步 命令:cnpm install postcss –g

推荐内容

2,下载autoprefixer插件,并创建postcss.config.js文件并写入配置代码

autoprefixer插件:自动给兼容性差 的属性增加浏览器前缀,提高代码兼容性

这里的方法任意选择一种即可

方法一:将postcss.config.js中的browsers值设置为[“>0%”]

传服务器时,这里的node_modules文件夹不需要上传,存在依赖文件package.json,则使用命令:cnpm i   即可下载所需要的所有模块,自动生成node_modules文件夹

  postcss.config.js文件代码:

// 自动补齐前缀// autoprefixer 插件let autoprefixer = require("autoprefixer");module.exports = {plugins: [autoprefixer({//兼容市面所有版本浏览器browsers: ["> 0% "]})]}

方法二:在package.json文件中配置,而package.json文件中只需要挂载一下插件名

postcss.config.js文件代码:

// 自动补齐前缀// autoprefixer 插件let autoprefixer = require("autoprefixer");module.exports = {plugins: [// 方法二// 这里必须挂上插件autoprefixer]}

package.json中需要添加的代码
   "browserslist": ["last 5 version",">1%","ie>=8"]

 last 5 version 表示最新五代浏览器

>1% 表示兼容市面上百分之九十九的浏览器

方法三:  创建.browserslistrc文件并写入代码

  这种方法就是把方法二中,package.json中需要添加的代码去掉””,然后放入.browserslistrc文件中

   第一步,先创建一个txt文件,然后另存为所有文件类型的  .browserslistrc文件,文件名就叫.lbrowserslistrc  不要做任何更改

  postcss.config.js文件代码还和第二种方法一样

// 自动补齐前缀// autoprefixer 插件let autoprefixer = require("autoprefixer");module.exports = {plugins: [autoprefixer]}

保存类型  这里选 所有文件

        

第二步,在创建好的.browserslistrc文件中输入以下代码 保存

  last 5 version

        >1%

        ie>=8

3,创建package.json文件。并保存相关依赖

第一步,创建package.json文件

         命令:cnpm init

        

第二步,下载postcss.config.js中需要的模块并自动记录在依赖文件package.json中,

命令:cnpm 模块名称  -D  或者cnpm 模块名称  -S

这里的D或者S必须大写

  下载autoprefixer 模块

  下载 postcss模块

   package.json中的显示

4,使用postcss进行转化

 选其中一种即可1)或2)

1)转化:postcss 目标文件 –o目录及新文件名

        

每次保存一次,都需要使用命令手动转化一次

2)实时监听:postcss -w 目标文件 –o目录及新文件名 

         

用这个命令可以实现,只要保存就转化

效果展示

src中的demo.css文件写法

css文件夹demo.css中的代码:

可以看到自动添加了前缀

注意:postcss插件不能直接用于less和sass,只能作用于css文件

   可以先用sass或者less,再将编译好的css文件使用postcss转化

配合postcss使用的插件

一、postcss-import插件的使用

   postcss-import插件整合其他css代码,实现css模块化

  由于postcss转化时不会将导入的css文件一起转化生成新的css文件或者代码,所以需要配合使用postcss-inport插件合并代码

如图:

reset.css文件是demo.css中导入的文件,通过postcss转化后并没有在同级目录生成新的reset.css文件,代码依旧是@impor”./reset.css”

node安装postcss-import 并保存在package.js文件中

命令:cnpm i postcss-import -D

   在postcss.config.js中引入postcss-import,并在pluings中添加

// 自动补齐前缀// autoprefixer 插件 不能直接用于less和sasslet autoprefixer = require("autoprefixer");// postcss-import 插件  合并代码let postcssImport = require("postcss-import");module.exports = {plugins: [// 这里必须挂上插件//自动加前缀autoprefixer,//合并css代码postcssImport]}

使用postcss转化之后引入的reset.css文件也被转化并合并到新的css文件中

如图:

 

2、cssnano插件 用来压缩代码,提高运行速度

1,安装 命令:cnpm i cssnano -S

   2, 使用:

psotcss.config.js中:

// autoprefixer 插件 不能直接用于less和sasslet autoprefixer = require("autoprefixer");// postcss-import 插件  合并代码let postcssImport = require("postcss-import");// vssnano 插件 压缩,提高代码运行速度let cssnano=require("cssnano");module.exports = {plugins: [// 这里必须挂上插件autoprefixer,postcssImport,cssnano]}

 然后就是使用postcss转化,照着上面步骤操作即可

postcss常用插件

1.postcss-cssnext

在css中用新的样式、新语法时,需要用到postcss-cssnext插件来兼容

在根路径定变零--color变量后,在不使用postcss-cssnext插件时,postcss转化后的css文件中p标签里面的背景色的值还是变量形式,这就需要用到postcss-cssnext插件

功能:使用新的样式

下载:

        

使用:

psotcss.config.js中:

// 自动补齐前缀// autoprefixer 插件 不能直接用于less和sasslet autoprefixer = require("autoprefixer");// postcss-import 插件  合并代码let postcssImport = require("postcss-import");// vssnano 插件 压缩,提高代码运行速度let cssnano = require("cssnano");// postcss-cssnext 使用新的css样式let postcssCssnext = require("postcss-cssnext");module.exports = {plugins: [// 这里必须挂上插件autoprefixer,postcssImport,cssnano,postcssCssnext]}

运行postcss

运行postcss时报这段代码,大概意思为:postcss-cssnext插件包含autoprefixer插件,请删除plugins中的autoprefixer

css效果图:

 

可以看到,转化后的css中p标签中的背景色值变为了red

注意:postcss-cssnext插件包含autoprefixer插件,所以使用了postcss-cssnext插件后不需要再安装、引入、使用autoprefixer插件

postcss-cssnext配置方法和autoprefixer一样:

在创建好的.browserslistrc文件中输入以下代码 保存

  last 5 version

        >1%

        ie>=8

已经使用了autoprefixer,这里在psotcss.config.js中将其注释,

// 自动补齐前缀// autoprefixer 插件 不能直接用于less和sass//let autoprefixer = require("autoprefixer");// postcss-import 插件  合并代码let postcssImport = require("postcss-import");// vssnano 插件 压缩,提高代码运行速度let cssnano = require("cssnano");// postcss-cssnext 使用新的css样式let postcssCssnext = require("postcss-cssnext");module.exports = {plugins: [// 这里必须挂上插件// autoprefixer,postcssImport,cssnano,postcssCssnext]}

注释后再次运行postcss

css效果图:

和上面一样转化后的p标签中的背景色值为red

2, stylelint插件 检测规范内容

可以提供很多css检测规则,可以去npm看对应文档

下载:

引入:

 建立规范 不能使用十六进制数作为color值

运行postcss后,这里报错了,stylelint检测到第20行代码不符合规范

3 postcss-sprites插件  把多张图片整合成一张大图(雪碧图)

     api较多 ,可以上npm官网上看

下载:

postcss.config.js中的引入并配置:

spritePath中写整合后路径,这里会自动创建文件夹并放置整合的大图(雪碧图)

运行postcss

转化后的css代码效果图:

转化后的css中自动定位了.div1,.div2图片位置

原本的images文件夹中的两张图

两张图被整合后dist文件夹中的一张大图:

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

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

相关文章

专升本-机器人流程化自动化(RPA)

一般考选择,题目较少 ,2018年中国步入RPA应用元年 机器人流程化自动化(RPA) Robotic process automation,RPA 1. 定义:(是一个软件系统,不是硬件)是以软件机器人和人工…

HCIP【GRE VPN、MGRE VPN与PPP验证综合实验】

目录 实验要求: 实验拓扑图: 实验思路: 实验步骤: 一、配IP地址 (1)配置所有设备接口的IP地址: (2)配置私网与公网接口的缺省路由使得公网可通: 二、P…

基于boost准标准库的搜索引擎项目

零 项目背景/原理/技术栈 1.介绍boost准标准库 2.项目实现效果 3.搜索引擎宏观架构图 这是一个基于Web的搜索服务架构 该架构优点: 客户端-服务器模型:采用了经典的客户端-服务器模型,用户通过客户端与服务器交互,有助于集中管理和分散计算…

OpenCV联通组件扫描

注:黑色背景 void ccl_demo() {QString appPath QCoreApplication::applicationDirPath();QString imagePath appPath "/rice.png";Mat img cv::imread(imagePath.toStdString());if (img.empty()) {return;}namedWindow("input", WINDOW_A…

设计模式6--抽象工厂模式

定义 案例一 案例二 优缺点

MacOS M1/M2/M3芯片如何安装Python3.6

前言 Mac电脑M芯片安装Python3.6报错。 一般情况下,Mac系统可以使用homebrew来管理安装软件。 brew search搜索发现,最低只能直接安装python3.7版本。 于是从Python官网下载安装包进行安装,确实也没有报错,安装完成后执行总是k…

【自动装箱以及包装类的缓存】⭐️通过具体案例看下每种包装类的不同结果

目录 前言 一、自动装箱与拆箱(以 Integer 包装类为例) 二、再来看看几个示例 ​编辑三、Double ,Float 类型亦是如此吗? 前言 小伙伴们大家好,日常使用业务层方面的代码居多,但也不可忘了基本的一些代码格式以及原…

git 查看文件夹结构树

在Git中,没有直接的命令可以像文件系统那样展示一个可视化的文件结构树。但是,你可以使用一些外部工具或命令来达到这个目的。 以下是一些方法,你可以使用它们来查看Git仓库的文件结构树: 使用tree命令(如果你的系统已…

采药采药~

题源 背包 #include<bits/stdc.h> using namespace std; struct medi{int t,v; }md[1110]; int t1,m; int dp[1110][1110]{0}; int main() {cin>>t1>>m;for(int i1;i<m;i){cin>>md[i].t>>md[i].v;}for(int i1;i<m;i){for(int j1;j<t1…

ubuntu22.04@Jetson Orin Nano安装配置VNC服务端

ubuntu22.04Jetson Orin Nano安装&配置VNC服务端 1. 源由2. 环境3. VNC安装Step 1: update and install xserver-xorg-video-dummyStep 2: Create config for dummy virtual displayStep3: Add the following contents in xorg.conf.dummyStep 4: Update /etc/X11/xorg.con…

设计模式7--建造者模式

定义 案例一 案例二 优缺点

专升本-区块链

区块链 定 义&#xff1a;一种新的数据记录&#xff0c;存储&#xff0c;表达的方式。参加区块链的全体成员都有一份数据&#xff0c;以及每个人对数据进行的操作都会被区块链里的每个人得知。这样就可以避免都存储在一个地方导致数据丢失后造成的损失 发展历程&#xff1a; …

【BlossomRPC】编解码器的实现

文章目录 RPC项目 配置中心项目 网关项目 在前面的文章了解完毕之后&#xff0c;我们以及设计了一个基本的RPC协议&#xff0c;之后&#xff0c;我们要做的就是基于这个RPC协议&#xff0c;去实现一个能解析这个RPC协议的编解码器。 这里编解码器比较容易写&#xff0c;按照…

面试题1(京东)之HiveSql --- 难度:入门初级

第1题 有如下的用户访问数据 userIdvisitDatevisitCountu012017/1/215u022017/1/236u032017/1/228u042017/1/203u012017/1/236u012017/2/218u022017/1/236u012017/2/224 要求使用SQL统计出每个用户的累积访问次数&#xff0c;如下表所示&#xff1a; 用户id月份小计累积u01…

Java-代理模式

1、什么是代理模式 代理&#xff1a;自己不做&#xff0c;找别人帮你做 代理模式&#xff1a;在一个原有功能的基础上添加新的功能 分类&#xff1a;静态代理和动态代理 2、静态代理 原有方式&#xff1a;就是将核心业务和服务方法都编写在一起 package com.AE.service;p…

《云原生安全攻防》-- K8s集群安全风险分析

在这个数字化快速发展的年代&#xff0c;云原生安全变得越来越重要。我明白对于很多朋友来说&#xff0c;这是一个既新奇又复杂的领域。因此&#xff0c;我整合了以往的专业积累&#xff0c;精心打造了一个专门讲解云原生安全的系列课程&#xff0c;目的是能给大家带来有价值的…

微信小程序备案流程详细操作指南

自2023年9月1日起&#xff0c;所有新上架的微信小程序均需事先完成备案手续&#xff0c;方能成功上线。而对于已经上架的存量小程序&#xff0c;也需要在2024年3月31日前完成备案工作。若在规定时间内未完成备案&#xff0c;平台将依据备案相关规定&#xff0c;自2024年4月1日起…

TC16-161T+ 音频 信号变压器 RF Transformers 600kHz-160MHz 射频集成电路 Mini-Circuits

Mini-Circuits是一家全球领先的射频、微波和毫米波元器件及子系统制造商。TC16-161T是Mini-Circuits出产的一款射频IC&#xff08;射频集成电路&#xff09;&#xff0c;具有平衡-不平衡转换器功用。制造商: Mini-Circuits 产品品种: 音频变压器/信号变压器 RoHS…

Git 如何合并多个连续的提交

我平常的编程喜欢是写一段代码就提交一次&#xff0c;本地一般不攒代码&#xff0c;生怕本地有什么闪失导致白干。但这样就又导致一个问题&#xff1a;查看历史日志时十分不方便&#xff0c;随便找一段提交可以看到&#xff1a; > git log --oneline 8f06be5 add 12/qemu-h…

OSPF基本原理和概念

文章目录 背景知识OSPF协议概述&#xff1a;OSPF区域的表示OSPF 骨干区域 –区域0OSPF 非骨干区域 -非0区域OSPF的五种区域类型OSPF工作原理OSPF 的报文类型OSPF邻居表中的七个状态 总结 背景知识 一台路由设备如何获取其他网段的路由&#xff0c;并加入到路由表中 直连路由 …