使用autoprefixer和postcss-cli给css加上浏览器厂商前缀

在写css的时候,总会使用到css3的许多好的东西,但是有一个我们不得不考虑的问题,那就是兼容性,通过Can I use这个网站我们就会发现兼容性的东西真多。

但是我们在写css的过程中,每一个都去手写的话,就会降低自己的开发效率。所以我们应该要让它自动给所有的css文件添加浏览器厂商前缀。因此我们可以使用autoprefixer这个插件来自动给css文件加上浏览器厂商前缀。

那么就开始吧,首先新建一个文件夹,在文件夹里打开命令提示符(在文件夹的空白区域shift+鼠标右击)

一、创建package.json文件

1.运行命令npm init。第一项为你创建的项目名称,这个就不多说了,一直按Enter(回车)。

二、安装所依赖的插件

1.运行命令npm i autoprefixer postcss-cli -D -g。-D表示-save-dev安装到开发项;-g表示全局安装。

如果想了解postcss-cli或者autoprefixer的更多用法你可以直接点击进入。

2.在package.json文件配置browserslist

"browserslist": ["last 5 version"]

如果想了解browserslist的更多用法你可以直接点击进入。

3.在根目录先创建src文件夹,在src里创建css文件夹,之后把你需要转化的css文件夹或css文件放到此目录下(提示:最好此css文件夹下只有css文件)。

4.在package.json文件中的script里配置运行命令。

"scripts": {

    "css": "npx postcss src/css -u autoprefixer -d dist/css",

    "test": "echo \"Error: no test specified\" && exit 1"

}

解释一下: src/css表示转化之前目录名,dis/css表示转化之后目录名,-u表示--use及需要使用的插件,-d表示-out-dir及需要输出的命令。

5.运行命令npm run css

查看前后对比效果图

这里分享一下我的演示目录和package.json文件

解释一下:里面有一些文件或许你没有,没有关系,因为我这里还使用了babel把es6转换成es5,所以略有不同。

因为es6的语法糖有很多,所以我们在开发的时候喜欢使用es6的东西。但是还是老问题--兼容性。所有需要使用babel。当然,如果你想要了解怎么一次性把所有的js文件里的es6转为es5可以点击babel(这里我解释了autoprefixer的使用和babel的使用)

总结:虽然只是一个小小的autoprefixer的使用,但是里面还是涉及到很多有用的知识的。最后通过这种自动化的方法,即通过autoprefixer自动把所有的css文件加上浏览器厂商前缀的方法,提升了我们的效率。

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页