postcss-import、postcss-url、autoprefixer、postcss-cssnext、cssnano、postcss-px-to-viewport、postcss-aspec

小草莓蹦蹦跳

已于 2023-04-14 10:26:10 修改

阅读量902

点赞数

分类专栏： Vue1.x和Vue2.x 文章标签： postcss 前端 javascript

于 2022-09-06 14:03:52 首次发布

本文链接：https://blog.csdn.net/qq_38290251/article/details/126720607

版权

Vue1.x和Vue2.x 专栏收录该内容

81 篇文章 6 订阅

订阅专栏

六、postcss-px-to-viewport

七、postcss-aspect-ratio-mini

八、postcss-write-svg

九、CSS Modules

十、postcss-viewport-units

一、postcss-import

https://github.com/postcss/postcss-import

解决@import引入路径问题。使用这个插件，可以让你很轻易的使用本地文件、node_modules或者web_modules的文件。这个插件配合postcss-url让你引入文件变得更轻松

二、 postcss-url

https://github.com/postcss/postcss-url

该插件主要用来处理文件，比如图片文件、字体文件等引用路径的处理。

在Vue项目中，vue-loader已具有类似的功能，只需要配置中将vue-loader配置进去

三、autoprefixer

用来自动处理浏览器前缀的一个插件。如果你配置了postcss-cssnext，其中就已具备了autoprefixer的功能。在配置的时候，未显示的配置相关参数的话，表示使用的是Browserslist指定的列表参数，你也可以像这样来指定last 2 versions 或者 > 5%。

如此一来，你在编码时不再需要考虑任何浏览器前缀的问题，可以专心撸码。这也是PostCSS最常用的一个插件之一。

四、postcss-cssnext

postcss-cssnext其实就是cssnext。该插件可以让我们使用CSS未来的特性，其会对这些特性做相关的兼容性处理。

https://cssnext.io/features/#automatic-vendor-prefixes

https://github.com/MoOx/postcss-cssnext

五、cssnano

https://github.com/cssnano/cssnano

主要用来压缩和清理CSS代码。在Webpack中，cssnano和css-loader捆绑在一起，所以不需要自己加载它。不过你也可以使用postcss-loader显式的使用cssnano。

在cssnano的配置中，使用了preset: "advanced"，所以我们需要另外安装：

npm i cssnano-preset-advanced --save-dev

cssnano集成了一些其他的PostCSS插件，如果你想禁用cssnano中的某个插件的时候，可以像下面这样操作：

"cssnano":{autoprefixer:false,"postcss-zindex":false}

上面的代码把autoprefixer和postcss-zindex禁掉了。前者是有重复调用，后者是一个讨厌的东东。只要启用了这个插件，z-index的值就会重置为1。这是一个天坑，千万记得将postcss-zindex设置为false。

六、postcss-px-to-viewport

https://github.com/evrone/postcss-px-to-viewport

主要用来把px单位转换为vw、vh、vmin或者vmax这样的视窗单位，也是vw适配方案的核心插件之一。

在配置中需要配置相关的几个关键参数：

viewportWidth:750,

// 视窗的宽度，对应的是我们设计稿的宽度，一般是750

viewportHeight:1334,

// 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置

unitPrecision:3,

// 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）

viewportUnit:'vw',

// 指定需要转换成的视窗单位，建议使用

vwselectorBlackList:['.ignore','.hairlines'],// 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名

minPixelValue:1,

// 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值

mediaQuery:false

// 允许在媒体查询中转换`px`

目前出视觉设计稿，我们都是使用750px宽度的，那么100vw = 750px，即1vw = 7.5px。

那么我们可以根据设计图上的px值直接转换成对应的vw值。

在实际撸码过程，不需要进行任何的计算，直接在代码中写px，比如：

.test{border:.5px solid black;border-bottom-width:4px;font-size:14px;line-height:20px;position:relative;}[w-188-246]{width:188px;}

编译出来的CSS：

.test{border:.5px solid #000;border-bottom-width:.533vw;font-size:1.867vw;line-height:2.667vw;position:relative;}[w-188-246]{width:25.067vw;}

在不想要把px转换为vw的时候，首先在对应的元素（html）中添加配置中指定的类名.ignore或.hairlines(.hairlines一般用于设置border-width:0.5px的元素中)：

<divclass="box ignore"></div>

写CSS的时候：

.ignore{margin:10px;background-color:red;}.box{width:180px;height:300px;}.hairlines{border-bottom:0.5px solid red;}

编译出来的CSS:

.box{width:24vw;height:40vw;}.ignore{margin:10px;/*.box元素中带有.ignore类名，在这个类名写的`px`不会被转换*/background-color:red;}.hairlines{border-bottom:0.5px solid red;}

上面解决了px到vw的转换计算。那么在哪些地方可以使用vw来适配我们的页面。

根据相关的测试：

容器适配，可以使用vw

文本的适配，可以使用vw

大于1px的边框、圆角、阴影都可以使用vw

内距和外距，可以使用vw

七、postcss-aspect-ratio-mini

https://github.com/yisibl/postcss-aspect-ratio-mini

主要用来处理元素容器宽高比。

在实际使用的时候，具有一个默认的结构

<divaspectratio><divaspectratio-content></div></div>

在实际使用的时候，你可以把自定义属性aspectratio和aspectratio-content换成相应的类名，比如：

<div class="aspectratio"> <div class="aspectratio-content"></div></div>

我个人比较喜欢用自定义属性，它和类名所起的作用是同等的。结构定义之后，需要在你的样式文件中添加一个统一的宽度比默认属性：

[aspectratio]{position:relative;}[aspectratio]::before{content:'';display:block;width:1px;margin-left:-1px;height:0;}[aspectratio-content]{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;}

如果我们想要做一个188:246（188是容器宽度，246是容器高度）这样的比例容器，只需要这样使用：

[w-188-246]{aspect-ratio:'188:246';}

有一点需要特别注意：aspect-ratio属性不能和其他属性写在一起，否则编译出来的属性只会留下aspect-ratio的值，比如：

<divaspectratiow-188-246class="color"></div>

编译前的CSS如下：

[w-188-246]{width:188px;background-color:red;aspect-ratio:'188:246';}

编译之后：

[w-188-246]:before{padding-top:130.85106382978725%;}

主要是因为在插件中做了相应的处理，不在每次调用aspect-ratio时，生成前面指定的默认样式代码，这样代码没那么冗余。所以在使用的时候，需要把width和background-color分开来写：

[w-188-246]{width:188px;background-color:red;}[w-188-246]{aspect-ratio:'188:246';}

这个时候，编译出来的CSS就正常了：

[w-188-246]{width:25.067vw;background-color:red;}[w-188-246]:before{padding-top:130.85106382978725%;}

八、postcss-write-svg

GitHub - csstools/postcss-write-svg: Write SVGs directly in CSS

主要用来处理移动端1px的解决方案。该插件主要使用的是border-image和background来做1px的相关处理。比如：

@svg1px-border{height:2px;@rect{fill:var(--color,black);width:100%;height:50%;}}.example{border:1px solid transparent;border-image:svg(1px-borderparam(--color #00b1ff))2 2 stretch;}

编译出来的CSS:

.example{border:1px solid transparent;border-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2px'%3E%3Crect fill='%2300b1ff' width='100%25' height='50%25'/%3E%3C/svg%3E")2 2 stretch;}

上面演示的是使用border-image方式，除此之外还可以使用background-image来实现。比如：

@svgsquare{@rect{fill:var(--color,black);width:100%;height:100%;}}#example{background:whitesvg(squareparam(--color #00b1ff));}

编译出来就是：

#example{background:whiteurl("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='%2300b1ff' width='100%25' height='100%25'/%3E%3C/svg%3E");}

解决1px的方案除了这个插件之外，还有其他的方法。可以阅读前期整理的《再谈Retina下1px的解决方案》一文。

特别声明：由于有一些低端机对border-image支持度不够友好，个人建议你使用background-image的这个方案。

九、CSS Modules

GitHub - css-modules/css-modules: Documentation about css-modules

Vue中的vue-loader已经集成了CSS Modules的功能，个人建议在项目中开始使用CSS Modules。特别是在Vue和React的项目中，CSS Modules具有很强的优势和灵活性。建议看看CSS In JS相关的资料。在Vue中，使用CSS Modules的相关文档可以阅读Vue官方提供的文档《CSS Modules》。