scss 使用变量名注意事项

variables.module.scss 文件

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

vue文件引用

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

<style lang="scss" scoped>
@import "~@/styles/variables.module.scss";
 
.app-main {
  height: calc(100vh - #{$navHeight});//scss的calc函数中使用变量需插值形式
}
style>

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