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