在Vue-Cli的项目中使用Scss/Sass变量

最近想Vue练练手，于是就搭了一个架子，但是使用过程中发现scss不能正常使用（可能是自己哈不是太熟悉的原因吧），现在来归纳总结一下。

1. 成功引入scss文件后，如果需要使用变量，那么使用 $ 来定义变量，后面的值跟着就是变量的值

   //variable.scss文件，建议建立专属的变量文件之后方便导入
   $colorRed:red;
   

2. 在要使用的模板的style中使用 @import导入 ，
   注意这里一定要在style（或者在文件中）中导入，
   而不是在script中导入

      //在组件中导入的形式
      //index.vue
      <template></template>
       <script></script>
        <style>
            @import "./variable.scss"
              
              page{
                    background-color : $colorRed;
              }
        </style>

      或 在文件中导入的形式
    
      //index.scss
      @import "./variable.scss"
      html{....}
      body{....}
       div{
             background:$colorRed; 
       }