樣式變量共用於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>