postcss部分插件小记

1.autoprefixer自动补充前缀

  • 功能:补全css属性前缀,如transform -> -webkit-transform

1.1 支持浏览器配置

支持浏览器列表:browsers,文档

我的移动端配置:

1
2
3
'last 2 versions',
'android 4',
'ios 8'

PC端配置:

1
['ie 6-8', 'Firefox > 20', 'cover 99.5%']

1.2 webpack配置

安装node依赖包postcss-loader,autoprefixer

1
npm i -D postcss-loader autoprefixer

webpack.config.js配置如下

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
// webpack.config.js
module.exports = {
// css
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [
require('autoprefixer')({
browsers: [
'last 2 versions',
'android 4',
'ios 8'
]
})
]
}
}
]
},
}

1.3 vue-cli3配置

vue-cli默认安装autoprefixer,配置项目根目录package.json文件中的browserslist字段。其他配置可见vue-cli3配置文档


1
2
3
4
5
"browserslist": [
"last 2 versions",
"android 4",
"ios 8"
]

1.4 create-react-app配置

同上vue-cli3配置,package.json文件中的browserslist字段

2.postcss-plugin-px2rem px转rem

  • 功能:取消用编辑器将px转rem

2.1 配置参数

1
2
3
4
5
6
7
8
9
10
11
12
{
rootValue: 75, //换算基数, 默认100 ,这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
unitPrecision: 4, // 保留小数
exclude: /(node_module)/, //默认false,可以(reg)利用正则表达式排除某些文件夹的方法,例如/(node_module)/
propWhiteList: [], //默认值是一个空数组,这意味着禁用白名单并启用所有属性。
propBlackList: [], //黑名单
selectorBlackList: [], //要忽略并保留为px的选择器
ignoreIdentifier: false, //(boolean/string)忽略单个属性的方法,启用ignoreidentifier后,replace将自动设置为true。
replace: true, // (布尔值)替换包含REM的规则,而不是添加回退。
mediaQuery: false, //(布尔值)允许在媒体查询中转换px。
minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
}

2.2 安装依赖

安装node依赖包postcss-loader,postcss-plugin-px2rem

1
npm i -D postcss-loader postcss-plugin-px2rem

2.3 webpack配置

webpack.config.js配置如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// webpack.config.js
module.exports = {
// css
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [
require('postcss-plugin-px2rem')({
rootValue: 75,
unitPrecision: 4
})
]
}
}
]
},
}

2.4 vue-cli3配置

修改vue.config.js配置文件,如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-plugin-px2rem')({
rootValue: 75,
unitPrecision: 4
}),
]
}
}
},
};

2.5 create-react-app配置

找到config目录下webpack.config.js(或webpack.config.dev.js),找到postcss-loader配置位置(搜索postcss-loader),添加px2rem配置插件,如

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
//...
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
require('postcss-plugin-px2rem')({
rootValue: 75,
unitPrecision: 4
})
],
sourceMap: isEnvProduction && shouldUseSourceMap,
},
}
//...

3.postcss-px-to-viewport px转vw

  • 功能:取消用编辑器将px转vw

3.1 配置参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
unitToConvert: 'px', // (String) 需要转换的单位,默认为"px"
viewportWidth: 320, // (Number) 设计稿的视口宽度
unitPrecision: 5, // (Number) 单位转换后保留的精度
propList: ['*'], // (Array) 能转化为vw的属性列表
viewportUnit: 'vw', // (String) 希望使用的视口单位
fontViewportUnit: 'vw', // (String) 字体使用的视口单位
selectorBlackList: [], // (Array) 需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位。
minPixelValue: 1, // (Number) 设置最小的转换数值,如果为1的话,只有大于1的值会被转换
mediaQuery: false, // (Boolean) 媒体查询里的单位是否需要转换单位
replace: true, // (Boolean) 是否直接更换属性值,而不添加备用属性
exclude: [], // (Array or Regexp) 忽略某些文件夹下的文件或特定文件,例如 'node_modules' 下的文件
landscape: false, // (Boolean) 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
landscapeUnit: 'vw', // (String) 横屏时使用的单位
landscapeWidth: 568 // (Number) 横屏时使用的视口宽度
}

3.2 安装依赖

1
npm i -D postcss-px-to-viewport

webpack/vue/react配置方式同上px2rem的配置方式(2.3~2.5),在此不做介绍