electron-vue 使用sass全局样式变量实现统一主题色_electron桌面 设置sass变量

安装sass-resources-loader包

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

修改webpack.renderer.config.js配置

找到.electron-vue/webpack.renderer.config.js，在module.rules下的sass-loader后添加以下内容

{
  loader: 'sass-resources-loader',
  options: {
    resources: path.join(__dirname, '../src/renderer/styles/element-variables.scss')  
  }
}

element-variables.scss

/* theme color */
$--color-primary: #1890ff;
$--color-success: #13ce66;
$--color-warning: #ffba00;
$--color-danger: #ff4949;
 
$--button-font-weight: 400;
 
$--border-color-light: #dfe4ed;
$--border-color-lighter: #e6ebf5;
 
$--table-border: 1px solid #dfe6ec;

重新编译即可在任何组件中使用样式变量