scss 注册vw和vh

2021-08-01 22:06:42 阅读：155 来源： 互联网

.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);

标签：scss,return,vh,px,base,vw,font
来源： https://blog.csdn.net/yh8899abc/article/details/119304355

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

scss 注册vw和vh