移动端h5....vue中rem适配rem.jscommon.scss全局引入scss，需要借助sass-resourc

rem.js

fnResize();window.onresize = function () {  fnResize();}function fnResize() {  let  Widths = document.documentElement.clientWidth || window.innerWidth  document.documentElement.style.fontSize = 37.5 / 750 * Widths + 'px';}// 禁止双击放大document.documentElement.addEventListener('touchstart', function (event) {    if (event.touches.length > 1) {      event.preventDefault();    }  }, false);  var lastTouchEnd = 0;  document.documentElement.addEventListener('touchend', function (event) {    var now = Date.now();    if (now - lastTouchEnd <= 300) {      event.preventDefault();    }    lastTouchEnd = now;  }, false);

common.scss

@function px2rem($px){    $rem:37.5px;    @return ($px/$rem)+rem;}

全局引入scss，需要借助 sass-resources-loader工具
```
npm install sass-resources-loader
```

然后在项目的根目录下，新建vue.config.js文件，输入以下内容

// vue.config.js
module.exports = {
    chainWebpack: config => {
        const oneOfsMap = config.module.rule('scss').oneOfs.store
        oneOfsMap.forEach(item => {
            item
                .use('sass-resources-loader')
                .loader('sass-resources-loader')
                .options({
                    // Provide path to the file with resources
                    // 要公用的scss的路径
                    resources: './src/assets/css/common.scss'
                })
                .end()
        })
    }
}
————————————————
版权声明：本文为CSDN博主「zxb89757」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/zxb89757/article/details/103256614

接着在.vue文件中，就可以直接用px2rem了

<style lang="scss" scoped>
    .search{
        font-size: px2rem(18px);
    }
</style>