scss 注册vw和vh

.stylelintrc.js文件中配置

module.exports = {
    extends: 'stylelint-config-standard',
    plugins: [
        'stylelint-scss',
    ],
    rules: {
        indentation: 4,
        "font-family-no-missing-generic-family-keyword": null,
        "at-rule-no-unknown": [
            true,
            // 底下是重点！！！！
            {
                ignoreAtRules: ["extend", "at-root", "debug", "warn", "error", "if", "else", "for", "each", "while", "mixin", "include", "content", "return", "function"]
            }
        ]
    },
};

vue.config.js文件中

module.exports = {
    pluginOptions: {
        lintStyleOnBuild: true,
        stylelint: {
            fix: false, // boolean (default: true) // 是否在文件自动保存时修复style样式错误
        },
    },
    chainWebpack: (config) => {
        // 设置 public 目录别名
        config.resolve.alias.set('#', resolve('public'));
    },
    css: {
        loaderOptions: {
            sass: {
                data: `
                    @import "@/common/global.scss"; //此次重点！！！！
                `,
            },
        },
    },
};

新建global.scss文件内容为

// 定义基础屏幕分辨率变量
$vw_base: 1920;
$vh_base: 1080;

// 计算视口宽度,vw()中的参数，直接传像素值
@function vw($px) {
    @return ($px / $vw_base) * 100vw;
}

// 计算视口高度, vh()中的参数，直接传像素值
@function vh($px) {
    @return ($px / $vh_base) * 100vh;
}

// 字号
@function font-size($px) {
    @return vw($px);
}

ok
开始使用

width: vw(61);
height: vh(28);
font-size: font-size(18);