PostCSS的使用

1.官方网址:https://postcss.org/
2.环境搭建过程
2.1安装node环境
Node安装
2.2在doc命令窗口输入 npm i post-cli -g
在这里插入图片描述
接下来输入postcss,没有出现底下的红色即可全局安装成功(我是因为还没有正确使用它)
在这里插入图片描述
3实例
建一个空文件夹(postcss,命名随意),在postcss建两个目录,分别是放转换前代码(src)和转换后代码(dist)
在这里插入图片描述
在src下随意建一个css文件
在这里插入图片描述
在根目录下(postcss),右击鼠标,选择在此处打开命令窗口,如果没有的话,可以看下IT之家学院的文章,这个文章是我在网上搜的,已成功。
在这里插入图片描述
输入命令行: postcss src/demo.css -o dist/demo.css
在这里插入图片描述
点开dist文件夹,就有转换之后的文件
在这里插入图片描述
因为每次更改css,都需要重新输入命令, postcss src/demo.css -o dist/demo.css有点麻烦,这时候可以在后边加上-w 来设置监听,后边不断闪烁的光标,说明程序没有断开,
在这里插入图片描述
如果想断开,就按俩下ctrl+c
在这里插入图片描述
4.想做处理的话,需要写一个配置文件,主要是配置一些常用的插件。
在这里插入图片描述
安装插件,在根目录下,点击命令行,输入cnpm i autoprefixer(autoprefixer是postcss插件)
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值