Title
- 1 min reading
- ·
- updated 2019.1.1
配置 PosstCss & 移动端vw
适配
推荐配置
// postcss.config.js
module.exports = {
plugins: {
/* Assets */
'postcss-import': {},
'postcss-url': {},
/* Utils */
'postcss-aspect-ratio-mini': {},
'postcss-write-svg': {
utf8: false
},
/* Feature */
'postcss-preset-env': {
autoprefixer: false
},
/* Only H5 vw移动端适配 */
'postcss-px-to-viewport': {
viewportWidth: 750,
viewportHeight: 1334,
unitPrecision: 3,
viewportUnit: 'vw',
selectorBlackList: ['.ignore'],
minPixelValue: 2, // ios对于小于1px的border不显示
mediaQuery: false
},
/* Minify */
cssnano: {
'cssnano-preset-advanced': {
zindex: false
}
},
/* Bugs */
'postcss-flexbugs-fixes': {}
}
}
npm i \
postcss-import \
postcss-url \
postcss-aspect-ratio-mini \
postcss-write-svg \
postcss-preset-env \
postcss-px-to-viewport \
cssnano \
cssnano-preset-advanced \
postcss-flexbugs-fixes \
--save-dev
解释
Assets
处理资源路径,vue 配置了 vue-loader 可以不用。