vue cli3.0全局引入scss文件

前端开发中我们常常会定义一些全局常量，比如主题类的：

安装scss：

npm install node-sass --save
npm install sass-loader --save

引入方式：

1、在App.vue文件中引入 @import "./assets/css/gloable.scss";  
2、在vue.config.js中配置 

css: {
    loaderOptions: {
        scss: {
            prependData: `@import "~@/assets/css/gloable.scss";`
        }
    }
},

---

scss文件：

:root{
  --theme_bg_color: #242f42;   
  --theme_slider_color: #324157; 
  --theme_s_hover_color: #242f42; 
  --theme_s_active_color: #20a0ff; 
  --theme_s_text_color: #bfcbd9; 
  --theme_collapse_color: #283446;
  --blue: #20a0ff;
  --green: #67C23A;
  --info: #909399;
  --black: #242f42;
  --gray: #909399;
  --red: #ff0000;
  --border_color: #DCDFE6;
}

.sidebar>.el-menu{
  background: var(--theme_slider_color);
}

.el-menu-item, .el-submenu__title{
  color: var(--theme_s_text_color)!important;
}

---

页面引用：

<style lang="scss" scoped>
    .my-tree-wrap{
       height: 240px;
       overflow-y: scroll;
       border: 1px solid var(--border_color);
       padding: 10px;
    }
</style>