Vue PostCSS的使用介绍

PostCSS

postcss 一种对css编译的工具,类似babel对js的处理,常见的功能如:

1 . 使用下一代css语法

2 . 自动补全浏览器前缀

3 . 自动把px代为转换成rem

4 . css 代码压缩等等

使用

创建好项目并且初始化npm init -y

创建一个页面,一个css

|-------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <``html lang``=``"en"``> <``head``> ``<``meta charset``=``"UTF-8"``> ``<``meta http-equiv``=``"X-UA-Compatible" content``=``"IE=edge"``> ``<``meta name``=``"viewport" content``=``"width=device-width, initial-scale=1.0"``> ``<``title``>PostCSS</``title``> ``<``link rel``=``"stylesheet" href``=``"./index.css" rel``=``"external nofollow" > </``head``> <``body``> ``<``div class``=``"box"``> ``<``div class``=``"box_1"``>盒子1</``div``> ``<``div class``=``"box_2"``>盒子2</``div``> ``<``div class``=``"box_3"``>盒子3</``div``> ``</``div``> </``body``> </``html``> |

css

|-------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | body{ ``background-color``: ``black``; } .box{ ``display``: flex; ``justify-``content``: space-between; ``text-align``: ``center``; } .box_``1``{ ``width``: ``200px``; ``height``: ``100px``; ``background-color``: ``red``; ``font-size``: ``18px``; ``&:hover{ ``background-color``: ``blue``; ``} } .box_``2``{ ``width``: ``200px``; ``height``: ``100px``; ``background-color``: yellow; } .box_``3``{ ``width``: ``200px``; ``height``: ``100px``; ``background-color``: ``blue``; } |

安装依赖

npm i postcss postcss-cli

运行

npx是高版本node可以使用的

npx postcss 源文件名.css -o 编译后的文件名.css

这样就能转换一个新css文件,然而并没有啥变化

使用第三方插件autoprefixer

Autoprefixer是一款自动管理浏览器前缀的插件,它可以解析CSS文件并且添加浏览器前缀到CSS内容里

主要用于处理兼容性问题

可以查看浏览器前缀信息

npx autoprefixer --info

运行

在-u 后面加上插件

npx postcss index.css -o dist.css -u autoprefixer

如果觉得以上运行方式太垃,那我们就开启新的方式吧!!!

使用第三方插件postcss-preset-env

postcss-preset-env是一个兼容浏览器,给一些css加上前缀的插件

npm i --dev postcss-preset-env

运行后可以发现会自动给你做兼容性处理

源代码:

|----------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | body{ ``background-color``: ``black``; } .box{ ``display``: flex; ``justify-``content``: space-between; ``text-align``: ``center``; } .box_``1``{ ``width``: ``200px``; ``height``: ``100px``; ``background-color``: ``red``; ``&:hover{ ``background-color``: ``blue``; ``} } .box_``2``{ ``width``: ``200px``; ``height``: ``100px``; ``background-color``: yellow; } .box_``3``{ ``width``: ``200px``; ``height``: ``100px``; ``background-color``: ``blue``; } |

编译后

|-------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | body{ ``background-color``: ``black``; } .box{ ``display``: -webkit-box; ``display``: -webkit-flex; ``display``: -moz-box; ``display``: -ms-flexbox; ``display``: flex; ``-webkit-box-pack: ``justify``; ``-webkit-justify-``content``: space-between; ``-moz-box-pack: ``justify``; ``-ms-flex-pack: ``justify``; ``justify-``content``: space-between; ``text-align``: ``center``; } .box_``1``{ ``width``: ``200px``; ``height``: ``100px``; ``background-color``: ``red``; ``font-size``: ``1.125``rem; } .box_``1:``hover{ ``background-color``: ``blue``; ``} .box_``2``{ ``width``: ``200px``; ``height``: ``100px``; ``background-color``: yellow; } .box_``3``{ ``width``: ``200px``; ``height``: ``100px``; ``background-color``: ``blue``; } |

是不是觉得很方便很beautiful~

使用第三方插件postcss-pxtorem

它是一款自动将px转rem的插件

npm i --dev postcss-pxtorem

然后就可以正常使用了

本来是这样的:

|-------------|---------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 | .box_``1``{ ``width``: ``200px``; ``height``: ``100px``; ``background-color``: ``red``; ``font-size``: ``18px``; ``} |

用了它就这样了:

|-------------|----------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 | .box_``1``{ ``width``: ``200px``; ``height``: ``100px``; ``background-color``: ``red``; ``font-size``: ``1.125``rem; } |

Is so good!!!

上方插件就演示这么多了,再介绍一下如何方便的运行:

运行的新方式

创建config文件

postcss.config.js

|----------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 | const postcssPresetEnv=require(``'postcss-preset-env'``) module.exports={ ``plugins: [ ``require(``"autoprefixer"``), ``postcssPresetEnv({ ``stage:0 ``}), ``require(``"postcss-pxtorem"``),``//单位转换 ``] } |

这样就能使用了

通过npx postcss 源文件名.css -o 编译后文件名.css

如果还觉得繁琐可以在package.json中进行配置简化该运行命令!!

相关推荐
武天2 分钟前
vue 的双向绑定原理
vue.js
武天2 分钟前
手写 vue3 的双向绑定
vue.js
golang学习记2 分钟前
从0死磕全栈之使用 VS Code 调试 Next.js 应用完整指南
前端
Mintopia5 分钟前
🧩 隐私计算技术在 Web AIGC 数据处理中的应用实践
前端·javascript·aigc
尘世中一位迷途小书童7 分钟前
代码质量保障:ESLint + Prettier + Stylelint 三剑客完美配置
前端·架构
Mintopia7 分钟前
🧭 Next.js 架构与运维:当现代前端拥有了“分布式的灵魂”
前端·javascript·全栈
尘世中一位迷途小书童17 分钟前
从零搭建:pnpm + Turborepo 项目架构实战(含完整代码)
前端·架构
JarvanMo26 分钟前
Flutter 中的 ClipRRect | 每日 Flutter 组件
前端
某柚啊27 分钟前
iOS移动端H5键盘弹出时页面布局异常和滚动解决方案
前端·javascript·css·ios·html5
心.c28 分钟前
如何学习Lodash源码?
前端·javascript·学习