vue-cli中如何将让scss变量能够同时在scss和js中使用

变量创建

所有scss变量在 styles/variables.scss.js编写，格式要求为：

/**
 * variables.scss.js中变量的命名规则如下：
 * 1.驼峰命名法
 * 使用方式如下：
 * 1.在scss变量中使用是正常的scss变量：$sideBarWidth
 * 2.在js中使用是定义时的变量格式：import { sideBarWidth } from "@/style/variables.scss.js";
 * */
module.exports = {
  // sideBar
  menuText: '#bfcbd9',
  menuActiveText: '#409EFF',
  subMenuActiveText: '#f4f4f5',
  menuBg: '#304156',
  menuHover: '#263445',
  subMenuBg: '#1f2d3d',
  subMenuHover: '#001528',
  sideBarWidth: '210px'
}

变量配置

在 vue.config.js 中

const scssVariables = require('./src/styles/variables.scss.js')

module.exports = {
// 配置全局样式变量
  css: {
    loaderOptions: {
      sass: {
        // prependData: '@import "@/styles/variables.scss";'
        prependData: Object.keys(scssVariables)
          .map((k) => `$${k}: ${scssVariables[k]};`)
          .join('\n')
      }
    }
  }
}

变量使用

配置webpack中sass解析方式，一般来说项目构建者已经处理完毕，项目成员无需关心。
使用时无需引入，直接在样式文件中正常使用即可。

.nav{
  color: $menuBg;
}

const width = sideBarWidth