安装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;
重新编译即可在任何组件中使用样式变量