variables.module.scss 文件
css
$navHeight: 50px;
:export {
$navHeight: $navHeight;
}
vue文件引用
- js中获取scss文件变量名需将文件名改为.module.scss
- scss的calc函数中使用变量需插值形式
html
<style lang="scss" scoped>
@import "~@/styles/variables.module.scss";
.app-main {
height: calc(100vh - #{$navHeight});//scss的calc函数中使用变量需插值形式
}
</style>
html
<script>
import variables from "@/styles/variables.module.scss";//命名带.module文件可以js获得变量名
</script>