2024年最全vue项目开发之样式篇——postcss插件，年末阿里百度等大厂技术面试题汇总

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 9.LostGrid

• 三、配置

一、postcss插件简介及安装

===============================================================================

PostCSS是一款使用插件去转换CSS的工具，有许多非常好用有趣的插件，例如autoprefixer,press或者postcss-preset-env等。这些都是基于postcss插件去实现的。postcss插件需要结合webpack打包工具去一起使用，另生产样式文件时还可以结合gulp使用。

安装方法：先安装插件

npm i -s postcss-preset-env

再配置文件：使用.postcssrc(JSON),.postcssrc.js或者postcss.config.js

二、插件介绍

=====================================================================

1.postcss-advanced-variables

---

可以像scss一样，在css文件中写变量 、条件、循环语法。

☞官方文档

2.postcss-partial-import

---

可以使用@import引入别的模块样式

☞官方文档

3.postcss-px-to-viewport（移动端适配方案）☆☆☆

---

适合于移动端适配方案开发，将px单位转化成vh,vw百分比

配置如下：

‘postcss-px-to-viewport’: {

unitToConvert: “px”, // 默认值px，需要转换的单位

viewportWidth: 375, // 视窗的宽度,对应设计稿宽度

viewportHeight: 667, // 视窗的高度, 根据375设备的宽度来指定，一般是667，也可不配置

unitPrecision: 3, // 指定px转换为视窗单位值的小数位数

propList: [“*”], // 转化为vw的属性列表

viewportUnit: “vw”, // 指定需要转换成视窗单位

fontViewportUnit: “vw”, // 字体使用的视窗单位

selectorBlaskList: [“.ignore-”], // 指定不需要转换为视窗单位的类

mediaQuery: false, // 允许在媒体查询中转换px

minPixelValue: 1, // 小于或等于1px时不转换为视窗单位

replace: true, // 是否直接更换属性值而不添加备用属性

exclude: [], // 忽略某些文件夹下的文件或特定文件

landscape: false, // 是否添加根据landscapeWidth生成的媒体查询条件 @media (orientation: landscape)

landscapeUnit: “vw”, // 横屏时使用的单位

landscapeWidth: 1134 // 横屏时使用的视窗宽度

}

注意：

1、@media 默认不转化px，可配置mediaQuery: true

2、@keyframes 默认不转化px，可手动转vw

☞官方中文文档

4.autoprefixer

---

可根据不同浏览器生产兼容浏览器样式前缀，不用手动一一添加前缀

☞官方中文文档

5.precss

---

可以像scss一样，在css文件中写混合、模块化语法。

☞官方中文文档

更多有趣的插件请☞这里

6.postcss-cssnext

---

7.postcss-modules

---

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-3cWZxCVb-1715661898003)]