electron-vue 使用sass全局样式变量实现统一主题色

水深无声 2022-11-29 12:21 260阅读 0赞

### 安装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')  
      }
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70][]

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;

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70]: /images/20221124/6763a8051b3d490d84fc3f7e5be6ecdd.png

发表评论取消回复

表情：

评论列表（有 0 条评论，260人围观）

还没有评论，来说两句吧...

相关阅读

相关 electron-vue 使用sass全局样式变量实现统一主题色

安装sass-resources-loader包 npm install --save-dev sass-resources-loader 修改webp

水深无声/ 2022年11月29日 12:21/ 0 赞/ 261 阅读

相关 PySimpleGUI主题色大全

PySimpleGUI主题色大全 sg.theme('Theme Name') Add a little color to your windows ![在这里

水深无声/ 2022年10月29日 12:25/ 0 赞/ 357 阅读

相关 typora主题色配置

一. 获取主题 ![image-20210622104543916][] 主题列表 http://theme.typora.io/ 二. 选一个自己喜欢的主题进入

野性酷女/ 2022年10月08日 15:18/ 0 赞/ 209 阅读

相关 html样式自动提取,webpack插件实现自动抽取css中的主题色样式，并一键动态切换主题色（element-ui）...

大家项目中经常会有切换UI主题色的需要。比较常用的做法，是将UI库相关css全部下载，替换其中的颜色，再应用到页面。这样做有几个问题： 1、需要下载整个UI库的样式css。文

痛定思痛。/ 2022年10月05日 15:56/ 0 赞/ 189 阅读

相关原生CSS设置网站主题色—CSS变量赋值

定义CSS变量在css文件顶部定义css变量，注意必须以`--`开头，使用`:root`包括这几个变量 :root { --main-bg-co

墨蓝/ 2022年04月13日 09:01/ 0 赞/ 422 阅读

相关 vue 配置sass、scss全局变量

下载vue项目下载vue项目就不多说了，大家既然搜索这个标题，肯定不差这一步依赖： 1.下载sass-resources-loader 执行npm/cnpm

旧城等待，/ 2022年03月07日 03:48/ 0 赞/ 377 阅读

相关 Vue 实现全局使用sass, less变量

首先运行这行命令 npm install sass-resources-loader --save-dev；在项目的build/utils.js中，找到

Bertha 。/ 2021年12月15日 23:25/ 0 赞/ 358 阅读

相关 sass 配置全局变量

场景：在前端工程中，我们会经常用到css预编译，有sass，less，styuls等，拿sass来说，通常我们会在项目里建一个`variables.scss`文件，里面会定义一

红太狼/ 2021年09月02日 05:36/ 0 赞/ 487 阅读

相关 uniapp 配置全局scss/less/sass变量

uniapp 配置全局scss/less/sass变量根目录新建 `vue.config.js`文件 vue.config.js module.exports

╰半橙微兮°/ 2021年08月31日 12:37/ 0 赞/ 2574 阅读

相关通过js定义变量控制css 颜色实现切换主题色

案例代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>T...

系统管理员/ 2021年01月19日 17:15/ 0 赞/ 974 阅读