🐯使用的版本
部分插件版本
- vue : 2.6.14
- lib-flexible: 0.3.2
- postcss-loader: 3.0.0
- postcss-plugin-px2rem: 0.8.1
- px2rem-loader: 0.1.9,
- sass: 1.32.7
- sass-loader: 12.0.0
🐯介绍插件
lib-flexible：用来响应式改变根元素的字体大小，来操作rem的大小
px2rem-loader： 用来原生的css的px转成rem
postcss-plugin-px2rem：用来使项目中使用了前端预处理器的px转成rem
🐯lib-flexible
lib-flexible：淘宝项目组开发出来的一个小插件，开源项目
git中最新提出由于viewport单位得到众多浏览器的兼容，lib-flexible这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用viewport来替代此方。
先说一下lib-flexible的使用，amfe-flexible就是后话了。
安装
VSCode终端安装：
npm install --save-dev lib-flexible
或者 利用淘宝镜像
cnpm install --save-dev lib-flexible
在main.js中引用：import "lib-flexible";
import Vue from "vue";
import App from "./App.vue";
import "lib-flexible";
Vue.config.productionTip = false;
new Vue({
render: (h) => h(App),
}).$mount("#app");
效果预览
🐯px2rem-loader
为什么使用px2rem-loader
提出lib-flexible的问题
问题抛出：就算修改了根的font-size的大小，但是与别的结构有什么关系。
解决办法：使用px2rem-loader插件，就可以把px转成rem，rem的是会根据根节点的字体大小来调整实际px的大小。
px2rem-loader介绍
px2rem-loader：使用px2rem处理CSS的样式px按照一定的设计转变成rem,项目地址
安装
VSCode终端安装：
npm install --save-dev px2rem-loader
或者 利用淘宝镜像
cnpm install --save-dev px2rem-loader
安装完成，在新建的vue.config.js自定义一下设置
module.exports = {
chainWebpack: config => {
config.module
.rule('css')
.test(/\.css$/)
.oneOf('vue')
.resourceQuery(/\?vue/)
.use('px2rem')
.loader('px2rem-loader')
.options({
remUnit: 37.5 //说明 1rem = 37.5px 换算的
})
},
};
由上可知1rem = 37.5px，为了验证是否可用，在HomeView.vue文件把vue logo上设置370px的大小。
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png" />
</div>
</template>
<script>
export default {
name: "HomeView",
};
</script>
<style scoped>
img {
width: 375px;
}
</style>
效果预览
🐯postcss-plugin-px2rem
为什么使用postcss-plugin-px2rem
提出px2rem-loader的问题
问题抛出：css预处理器比如项目中使用scss，less怎么办？
解决办法：使用postcss-plugin-px2rem插件，就可以自动修改scss等结构的px转成rem
postcss-plugin-px2rem介绍
postcss-plugin-px2rem：可以从像素单位生成rem单位。
postcss-plugin-px2rem的github地址
安装
VSCode终端安装：
npm install --save-dev postcss-plugin-px2rem
或者 利用淘宝镜像
cnpm install --save-dev postcss-plugin-px2rem
修改vue.config.js中的配置
module.exports = {
transpileDependencies: true,
chainWebpack: config => {
//css的px-to-rem配置
config.module
.rule('css')
.test(/\.css$/)
.oneOf('vue')
.resourceQuery(/\?vue/)
.use('px2rem')
.loader('px2rem-loader')
.options({
remUnit: 37.5
})
},
//css预处理器px-to-rem问题
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-plugin-px2rem')({
rootValue: 37.5, // 换算基数，1rem相当于37.5px,值为37.5时,淘宝插件里面为375/10 =37.5
// unitPrecision: 5, //允许REM单位增长到的十进制数字。
//propWhiteList: [], //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
// propBlackList: [], //黑名单
exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)\/如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
// selectorBlackList: [], //要忽略并保留为px的选择器
// ignoreIdentifier: false, //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
// replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
}),
]
}
}
}
};
在package.json中插入
"postcss": {
"plugins": {
"autoprefixer": {},
"precss": {}
}
},
运行会出现的错误以及解决办法
注意：如果爆出错误如下
Syntax Error: ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'plugins'. These properties are valid:
object { postcssOptions?, execute?, sourceMap?, implementation? }
使用以下命令： 首先卸载了postcss-loader
cnpm uninstall postcss-loader
在此加载低版本的的postcss-loader，查阅网上，使用的是3.0.0
cnpm install --dev postcss-loader@3.0.0
完美解决。
数据修改
在新建版本的App.vue 中，nav修改一些数据,为了更好的观察问题
nav {
padding: 37.5px;
a {
font-weight: bold;
color: #2c3e50;
font-size: 37.5px;
&.router-link-exact-active {
color: #42b983;
}
}
}
效果展示：
🐯结语
祝你我好运🐮🐯
