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.125rem;

}

.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.125rem;

}

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中进行配置简化该运行命令!!

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

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

相关文章

深入解析Oracle数据库merge

概念 Oracle数据库中的MERGE语句是一种强大的DML&#xff08;Data Manipulation Language&#xff09;操作&#xff0c;它允许用户在一个单一的SQL语句中根据特定的条件同时执行INSERT、UPDATE以及在某些情况下还包括DELETE操作。MERGE语句的核心功能是根据源数据&#xff08;…

何恺明重提十年之争——模型表现好是源于能力提升还是捕获数据集偏置?

想象一下&#xff0c;如果把世界上所有的图片都找来&#xff0c;给它们放到一块巨大的空地上&#xff0c;其中内容相似的图片放得近一些&#xff0c;内容不相似的图片放得远一些&#xff08;类比向量嵌入&#xff09;。然后&#xff0c;我随机地向这片空地撒一把豆子&#xff0…

Vue3+Vite+Axios Request 请求封装(TS版本)最新

Vue3ViteAxios Request 请求封装&#xff08;TS版本&#xff09; http > index.ts 请求封装 /** Date: 2024-03-30 12:37:05* LastEditors: zhong* LastEditTime: 2024-03-30 14:12:52* FilePath: \app-admin\src\http\index.ts*/ import axios, { AxiosInstance, AxiosRequ…

【C#】知识点速通

前言&#xff1a; 笔者是跟着哔站课程&#xff08;Trigger&#xff09;学习unity才去学习的C#&#xff0c;并且C语言功底尚存&#xff0c;所以只是简单地跟着课程将unity所用的C#语言的关键部分进行了了解&#xff0c;然后在后期unity学习过程中加以深度学习。如需完善的C#知识…

码支付个人支付宝永不掉线使用教程

​支付宝免CK添加操作稍微繁琐点&#xff0c;请耐心观看 此通道必须关闭你的余额宝自动转入功能&#xff0c;否则可能造成不跳转 支付宝添加的所有通道均支持H5免输入收款 第一步&#xff1a;打开支付宝开发平台&#xff0c;然后用你的支付宝注册登陆&#xff1a;https://op…

pytest中文使用文档----10skip和xfail标记

1. 跳过测试用例的执行 1.1. pytest.mark.skip装饰器1.2. pytest.skip方法1.3. pytest.mark.skipif装饰器1.4. pytest.importorskip方法1.5. 跳过测试类1.6. 跳过测试模块1.7. 跳过指定文件或目录1.8. 总结 2. 标记用例为预期失败的 2.1. 去使能xfail标记 3. 结合pytest.param方…

算法学习——LeetCode力扣动态规划篇5

算法学习——LeetCode力扣动态规划篇5 198. 打家劫舍 198. 打家劫舍 - 力扣&#xff08;LeetCode&#xff09; 描述 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金&#xff0c;影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统…

C语言如何进⾏函数的嵌套调⽤?

一、问题 C语⾔中不允许进⾏嵌套的函数定义&#xff0c;因此各函数之间是平⾏的&#xff0c;不存在上⼀级函数和下⼀级函数的问题。但是C语⾔允许在⼀个函数的定义中出现对另⼀个函数的调⽤&#xff0c;这就是函数嵌套调⽤。那么如何嵌套调⽤呢&#xff1f; 二、解答 函数的嵌…

python学习16:python中的布尔类型和条件语句的学习

python中的布尔类型和条件语句的学习 1.布尔&#xff08;bool&#xff09;类型的定义&#xff1a; 布尔类型的字面量&#xff1a;True表示真&#xff08;是、肯定&#xff09; False表示假&#xff08;否、否定&#xff09; True本质上是一个数字记作1&#xff0c;False记作0 …

遥感数字图像处理的学习笔记

相关链接&#xff1a; 遥感数字图像处理实验教程&#xff08;韦玉春&#xff09;--部分实验问题回答 目录 1.什么是图像&#xff0c;什么是数字图像&#xff1f; 2.什么是遥感数字图像&#xff1f;模拟图像(照片)与遥感数字图像有什么区别&#xff1f; 3.什么是遥感数字图像…

构建操作可靠的数据流系统

文章目录 前言数据流动遇到的困难先从简单开始可靠性延迟丢失 性能性能损失性能——分层重试 可扩展性总结 前言 在流式架构中&#xff0c;任何对非功能性需求的漏洞都可能导致严重后果。如果数据工程师没有将可伸缩性、可靠性和可操作性等非功能性需求作为首要考虑因素来构建…

ChatGPT商业化平台一键部署(API管理,发卡收费,使用平台,支持GPT4)

接下来我就介绍一下如何利用开源平台搭建一个商业化的chatgpt网站 但是在此之前,请大家认真学习并遵守: OpenAI 的使用条款以及当地法律法规,不得用于非法用途。根据《生成式人工智能服务管理暂行办法》的要求,请勿对中国地区公众提供一切未经备案的生成式人工智能服务。一…

智慧公厕的全域感知、全网协同、全业务融合和全场景智慧赋能

公共厕所是城市的重要组成部分&#xff0c;为市民提供基本的生活服务。然而&#xff0c;传统的公厕管理模式存在诸多问题&#xff0c;如排队等候时间长、卫生状况差、空气质量差等&#xff0c;严重影响市民的出行和生活质量。为了解决这些问题&#xff0c;智慧公厕应运而生&…

Android9.0以后不允许HTTP访问的解决方案

背景 自 Android 9.0 起&#xff0c;默认禁止使用 HTTP 进行访问。当尝试使用 HTTP 链接时&#xff0c;将会收到以下错误信息&#xff1a; "Cleartext HTTP traffic to " host " not permitted"为了解决这一问题&#xff0c;下面介绍两种破解方法&…

【Python基础教程】4 . 算法的空间复杂度

&#x1f388;个人主页&#xff1a;豌豆射手^ &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 &#x1f917;收录专栏&#xff1a;python基础教程 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共同学习、…

最短路-Floyd Dijkstrea

Floyd算法 一种求解“多源最短路”问题的算法 在Floyd算法中&#xff0c;图一般用邻接矩阵存储&#xff0c;边权可正可负&#xff08;但不允许负环&#xff09;&#xff0c;利用动态规划的思想&#xff0c;逐步求解出任意两点之间的最短距离 int d[N][N],初始为无穷 d[i][j…

拌合楼管理软件开发(十三) 对接耀华XK3190-A9地磅(实战篇)

前言: 实战开整 目前而言对于整个拌合楼管理软件开发,因为公司对这个项目还处于讨论中,包括个人对其中的商业逻辑也存在一些质疑,都是在做一些技术上的储备.很早就写好了串口与地磅对接获取代码,也大概知道真个逻辑,这次刚好跟库区沟通,远程连接到磅房电脑,开始实操一下. 一、地…

【极简主义的深度学习】01 概览深度学习

要学习一个东西&#xff0c;需要先想清楚为什么而出发&#xff0c;以及怎么能达到自己想要的效果。当然也不能太执着于自己的目标&#xff0c;沿途的风景也是非常美丽的&#xff0c;如果路边的风景你觉得很美就停下来欣赏&#xff0c;机器学习也一样。对于我来说&#xff0c;是…

GFW不起作用

闲着折腾&#xff0c;刷openwrt到一个小米3G路由器后&#xff0c;GFW不起作用。后面发现是自己电脑设置了DNS&#xff0c;解析完IP后&#xff0c;在经过代代&#xff0c;IP不在GFW的清单里&#xff0c;所以转发控制就没有起作用。 结论 在经过代代前的所有节点&#xff0c;都…