在vue中,添加scss全局变量的使用

1先下载第三方模块:

npm install sass-resources-loader --save-dev

2 项目文件中,创建scss文件:variable.scss

文件写入相关的全局变量:

//scss文件 公共样式
//导航菜单背景颜色
$navbgColor:#545c64;

//头部导航一级标题:
$headerTitle:'20px';

// 头部导航高度
$headerHeight:'60px';

//二级标题
$midTitle:'14px';

//边框颜色
$boderColor:#666;

//左侧菜单宽度
$leftMenuWidth:170px;

3 配置vue.config.js

如果没有,则新建一个该文件
文件内写入: (注意这种写法:适用于sass-loader v8版本及以上)

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "~@/assets/variable.scss";`
      }
    }
  }
}

4 在style中使用变量

注意这个lang=“scss” 不能丢了

<style lang="scss" >

.el-submenu {
  overflow: hidden;
  width:$leftMenuWidth;

  }
.el-menu-item {
  width:$leftMenuWidth;
}
</style>