寻求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.js
module.exports={
...
chainWebpack:config=>{
constcssRule=config.module.rule('vue')
cssRule
.use(require.resolve('./my-loader.js'))
.loader(require.resolve('./my-loader.js'))
},
...
}
loader：
//my-loader.js
constvwLine=/^\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

这样试试呢