寻求scss函数和媒体查询组合方案求大佬指点！

Question

如题:需求是小于1920px，vw函数直接返回px值，大于1920转换为vw，这样做的目的是在页面中不需要写媒体查询的代码
$vw_base:1920;/*设计稿基数*/
/*尝试将媒体查询融合到SCSS函数*/
@mediascreenand(min-width:1920px){
@functionvw($px){
@return($px/$vw_base)*100vw
}
}
@mediascreenand(max-width:1920px){
@functionvw($px){
@return$px
}
}
页面中使用
.index-comp-ct{
width:vw(1920);
height:vw(1080);
border:1pxsolid;
overflow:auto;
}
但是这样行不通，不知道是否有其他方案

Answer 1

自问自答:抛砖引玉我的解决方式：自己搞个loader,处理样式//vue.config.jsmodule.exports={...chainWebpack:config=>{constcssRule=config.module.rule('vue')cssRule.use(require.resolve('./my-loader.js')).loader(require.resolve('./my-loader.js'))},...}loader：//my-loader.jsconstvwLine=/^\s*(\w+(?:-\w+)?):((\s*vw\(\d+\)){1,4})(\w)*\s*;$/mgi//匹配是否含有vw单位;constvwValue=/vw\((\d+)\)/functionreplaceFn(match){return`@mediascreenand(min-width:1920px){${match.trim()}}`+'\n'+`@mediascreenand(max-width:1920px){${match.replace(vwValue,'$1px')}}`}module.exports=function(content){content=content.replace(vwLine,replaceFn)this.callback(null,content)}

Answer 2

Title*{padding:0;margin:0;box-sizing:border-box;font-size:0;}:root{--u:10px;}@mediascreenand(max-width:500px){:root{--u:1px;}}@mediascreenand(min-width:500px){:root{--u:1vw;}}div{width:calc(20*var(--u));background-color:red;height:10px;}这样试试呢