常用:px2rem-loader、postcss-px2rem、postcss-pxtorem
postcss-plugin-px2rem官方文档:https://www.npmjs.com/package/postcss-plugin-px2rem
postcss-pxtorem官方文档:https://www.npmjs.com/package/postcss-pxtorem
postcss-px2rem官方文档:https://www.npmjs.com/package/postcss-px2rem
那么他们有什么区别呢?
- px2rem-loader 默认只转换内部css文件,可设置转换外部
- postcss-px2rem 可以把所有文件的px转换位rem 包括框架
px2rem-loader 使用
npm install px2rem-loader --save
vue-cli 2.0 默认转换所有样式
// vue-cli 2.0
// build/utils.js
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75
}
}
const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader,px2remLoader]
if (loader) {
...
}
...
vue-cli 3.0 默认只转换内部样式,ui框架不会被转换
// vue-cli 3.0
// vue.config.js
module.exports = {
...
chainWebpack: config => {
config.module
.rule('css')
.test(/\.css$/)
.oneOf('vue')
.resourceQuery(/\?vue/)
.use('px2rem')
.loader('px2rem-loader')
.options({
remUnit: 75
})
}
...
}
postcss-px2rem使用
npm install postcss-px2rem --save
vue-cli 2.0 默认只转换内部样式,ui框架不会被转换
// vue-cli 2.0
// build/vue-loader.conf.js
const px2rem = require('postcss-px2rem')
module.exports = {
...
postcss: function() {
return [px2rem({ remUnit: 37.5 })]; // ui尺寸375,根据自身情况自行设置
}
}
vue-cli 3.0 默认转换所有样式
// vue-cli 3.0
// postcss.config.js
// 单独设置cube-ui内样式转换
module.exports = ({ file }) => {
let remUnit
if (file && file.dirname && file.dirname.indexOf('cube') > -1) {
remUnit = 37.5
} else {
remUnit = 75
}
return {
plugins: {
autoprefixer: {},
'postcss-px2rem': {
remUnit
}
}
}
}
或者
// vue.config.js
// 转换所有
module.exports = {
...
css: {
loaderOptions: {
...
postcss: {
plugins: [
require('postcss-px2rem')({ remUnit: 30 }), // 换算的基数
]
}
}
},
...
}
postcss-pxtorem使用 (默认转换所有样式)
npm install postcss-pxtorem --save
selectorBlackList 可过滤ui框架,使(cube-ui、vant-ui)等框架中px单位不转换成rem(局限:固定开头类型,例如 cube-ui 样式开头为 cube- )
// vue-cli 2.0
// .postcssrc.js
module.exports = {
"plugins": {
...
"postcss-pxtorem": {
rootValue: 37.5, // ui尺寸375,根据自身情况自行设置
unitPrecision: 5, // 最小精度,小数点位数
propList: ['*', '!font*'], // !不匹配属性(这里是字体相关属性不转换)
selectorBlackList: ['cube'], // 过滤class开头
minPixelValue: 2 // 替换的最小像素值
}
}
}
// vue-cli 3.0
// vue.config.js
module.exports = {
...
css: {
loaderOptions: {
...
postcss: {
plugins: [
require('postcss-pxtorem')({
rootValue: 30, // 换算的基数
selectorBlackList: ['cube'], // 忽略转换正则匹配项
propList: ['*'],
}),
]
}
}
},
...
}