1.创建一个scss文件
//a.scss文件
@function px2rem($px) {
$rem: 37.5px;//苹果6的设计稿
@return ($px / $rem) + rem;
}
2.在vue中配置全局的sass
在vue.config.js文件中加入下面代码就可以scss文件里面的方法全局引用
module.exports = {
css: {
loaderOptions: {
// 给 sass-loader 传递选项
sass: {
// @/ 是 src/ 的别名
// 所以这里假设你有 `src/variables.scss` 这个文件
prependData: `@import '~@/style/reset.scss';` //新版本
// 旧版本 data: `
// @import '@/style/reset.scss';
// `
}
},
}
}
3.在.vue文件中引用
px2rem(40px)中的参数就是设计稿的尺寸
.header {
height: px2rem(40px);
width: 100%;
background:$df;
// background: red;
padding-left: px2rem(23px);
box-sizing: border-box;
.header-content{
height: px2rem(40px);
width: 100%;
}
.header-item {
color: #ffcdce;
font-size: px2rem(16px);
margin-right: px2rem(20px);
float: left;
line-height: px2rem(40px);
&:nth-child(2) {
color: #fff;
font-size: px2rem(17px);
}
}
}