样式变量共用于js或者template

环境

• vue cli4项目
• stylus (如果使用sass、less，可以类比)

步骤

1. 创建stylus的变量文件

   variable.styl

   $mainBg = rgba(0, 21, 42, 1);
   $mainWidth = 210px;
   
   // 导出变量用于js
   :export {
     mainBg: $mainBg;
     mainWidth: $mainWidth;
   }
   

2. js中使用

   // 获取variables.styl中export导出的对象
   import variables from '@/variables.styl'
   export default {
     computed: {
       variables() {
         return variables
       }
     }
   }
   

3. template中使用

   <template>
   	<div :style="{width: variables.mainWidth}">
           内容
       </div>
   </template>
   <script>
   import variables from '@/variables.styl'
   export default {
     computed: {
       variables() {
         return variables
       }
     }
   }    
   </script>