scss 使用变量名注意事项

variables.module.scss 文件

$navHeight: 50px;
:export {
    $navHeight: $navHeight;
}

vue文件引用

• js中获取scss文件变量名需将文件名改为.module.scss
• scss的calc函数中使用变量需插值形式

<script>
import variables from "@/styles/variables.module.scss";//命名带.module文件可以js获得变量名
console.log(variables)
</script>

 

<style lang="scss" scoped>
@import "~@/styles/variables.module.scss";

.app-main {
  height: calc(100vh - #{$navHeight});//scss的calc函数中使用变量需插值形式
}
</style>