安裝
使用npm安裝
$ npm install postcss-px-to-viewport --save-dev
或者使用yarn進(jìn)行安裝
$ yarn add -D postcss-px-to-viewport
在postcss.config.js添加如下配置
module.exports = {
plugins: {
// ...
'postcss-px-to-viewport': {
// options
unitToConvert: 'px',//(String) 需要轉(zhuǎn)換的單位毯欣，默認(rèn)為"px"
viewportWidth: 750, // (Number) 設(shè)計(jì)稿的視口寬度，一般是750
unitPrecision: 3, // (Number) 單位轉(zhuǎn)換后保留的精度（很多時候無法整除）
viewportUnit: 'vw', // (String) 希望使用的視口單位
selectorBlackList: ['.ignore', '.hairlines'],
/*(Array) 需要忽略的CSS選擇器斗这，不會轉(zhuǎn)為視口單位朦肘，使用原有的px等單位
如果傳入的值為字符串的話畏妖，只要選擇器中含有傳入值就會被匹配
例如 selectorBlackList 為 ['body'] 的話， 那么 .body-class 就會被忽略
如果傳入的值為正則表達(dá)式的話，那么就會依據(jù)CSS選擇器是否匹配該正則
例如 selectorBlackList 為 [/^body$/] , 那么 body 會被忽略肮雨，而 .body 不會*/
minPixelValue: 1, // (Number) 設(shè)置最小的轉(zhuǎn)換數(shù)值体斩，如果為1的話梭稚，只有大于1的值會被轉(zhuǎn)換
mediaQuery: false // (Boolean) 媒體查詢里的單位是否需要轉(zhuǎn)換單位
exclude：[/^node_modules$/]// (Array or Regexp) 忽略某些文件夾下的文件或特定文件，例如 'node_modules' 下的文件
//include：/\/src\/mobile\//
/*(Array or Regexp) 如果設(shè)置了include絮吵，那將只有匹配到的文件才會被轉(zhuǎn)換弧烤，例如只轉(zhuǎn)換 'src/mobile' 下的文件
如果值是一個正則表達(dá)式，將包含匹配的文件蹬敲，否則將排除該文件
如果傳入的值是一個數(shù)組暇昂，那么數(shù)組里的值必須為正則
注意：exclude和include是可以一起設(shè)置的，將取兩者規(guī)則的交集*/
landscapeUnit:'vw' (String) 橫屏?xí)r使用的單位
landscapeWidth:750 (Number) 橫屏?xí)r使用的視口寬度
}
}
}
至此配置完成后直接運(yùn)行項(xiàng)目就ok了
