在superset0.3.6的看板，在新增和编辑时，是能够间接增加css款式去管制整个看板页面任意元素的款式。或者在治理菜单--css模板增加相应css模板，而后编辑看板时间接抉择利用css模板。
这个性能的确是香，这能够实现不必批改一句源代码就将看板的格调、款式齐全扭转，比方如下这样：

但说实话，间接在看板的款式编辑弹窗里写款式，切实是太苦楚了，或者说这**齐全承受不了呀！
痛点如下：

  • 实时预览成果太差--须要先保留，而后试下成果，而后持续编辑看板，抉择编辑CSS模板，再接着写，如此往返；
  • 没有代码提醒；
  • 不能够应用css预处理语言；

这是简略分享，我是应用应用gulp+electron解决这些问题的。

我的项目初始化

mkdir theme_editorcd theme_editornpm init -y

应用electron加载页面注入css

装置electron,下载electron会须要一点工夫，可尝试应用cnpm

npm install electron -D

根目录下增加main.js

const { app, BrowserWindow } = require('electron')// 创立electron window function createWindow () {  const win = new BrowserWindow({    webPreferences: {      // 开启开发工具，不便调试      devTools: true    }  })  // superset web服务地址  // 倡议应用生产地址，本地就能够不须要启动superset后端服务了  const url = 'http://127.0.0.1:5000'  // 这个是要插入css款式文件的页面门路  // 并不需要所有页面都插入css款式  // 所有的看板页面都插入css款式  const insertCssPath = new RegExp('/superset/dashboard/')  // 如果是在本地superset的服务  // 可间接把css文件放在superset我的项目的superset/static/assets目录下，而后如下应用  // 如果是加载的生产地址，则可应用IIS或者Nginx搭建一个本地web服务，返回css文件  // 间接如：http://localhost:8080/style/theme.css,应用  const cssUrl = '/static/assets/theme.css'  // 加载页面  win.loadURL(url)  // 监听页面筹备实现，插入款式  win.webContents.on('dom-ready', () => {    let webUrl = win.webContents.getURL()        if (insertCssPath.test(webUrl)) {      // 如果是须要插入款式文件      // 执行js代码往以后页面插入款式文件      win.webContents.executeJavaScript(`        const link = document.createElement('link');        link.setAttribute('type','text/css');        link.setAttribute('rel','stylesheet');        link.setAttribute('href','${cssUrl}');        document.head.appendChild(link);`      )      return false    }  })}app.whenReady().then(createWindow)

package.json增加一个脚本，批改main属性：

{  "name": "theme_editor",  "version": "1.0.0",  "description": "",  "main": "main.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "start": "electron ."  },  "keywords": [],  "author": "",  "license": "ISC",  "devDependencies": {    "electron": "^10.1.2"  }}

在superset我的项目，superset/static/assets目录下增加theme.css

#app {  height: 100%;  overflow: hidden;  background: linear-gradient(180deg, #3F4685 0%, #222648 100%);}

而后，跑起superset前后端服务。当前目录执行命令

npm run start

如果一切正常，下面命令会弹出一个electron窗口，加载superset的web服务，登陆后关上任意一个看板，看板的背景会变成theme文件设置成的色彩，如下：

这里有几个须要强调留神的中央：

  1. loadURL的URL请依据理论状况配置(本地也可能并非5000端口)，倡议应用线上服务；
  2. 对于css文件的门路，应用superset才可间接放在superset/static目录下，如何应用线上地址，须要在本地搭建web服务来拜访css文件地址；
  3. 如果应用superset服务加载css文件，会有缓存，须要在开发者工具的network中禁用缓存(Disable cache);
  4. electron窗口中应用；

以上，咱们就实现了如何应用electron实现能够在本人喜爱的编辑器中，编辑款式了。但还是有以下问题：

  1. 尽管预览比之前好了，但每次批改后还是要ctrl+r去刷新，没有做到主动刷新。
  2. 如果我想应用CSS预编译语言呢？

接下来，用gulp解决下面两个问题。

应用gulp联合electron-connect实现主动刷新

装置相干依赖：

npm install gulp gulp-cli electron-connect -D

增加gulpfile.js:

const { watch, task } = require('gulp');const elecConnect = require('electron-connect').server.create(); // 款式批改应用electron-connect刷新，electron窗体function reload (cb) {  elecConnect.reload()  cb()}task('watch', function () {  elecConnect.start()  watch(['./theme.css'], reload)})

同时，在main.js中应用connect：

// 批改main.js,在第二行引入connectconst client = require('electron-connect').client...// 在win.loadURL(url)后增加client.create(win)

在以后指标下增加theme.css，起个IIS服务指向theme_editor，**我这里端口是88,所以须要把main.js的cssUrl值批改为http://localhost:88/theme.css

// main.js...const cssUrl = 'http://localhost:88/theme.css'...

最初，当前目录执行命令：

npx gulp watch

如果这里没出问题，那么，你批改theme.css后，electron-connect就会主动把electron窗口以后的页面刷新一下。这里我碰到一个问题，提醒electron不存在，删除node_modules再从新install一次解决。这里还有一点要留神下，如果npm版本小于5.2，是无奈应用npx,要么降级node版本，要么全局装置gulp-cli而后间接跑gulp watch。
好了，到目前为止，咱们又解决了一个主动刷新的需要。上面，咱们来实现一下预处理。

应用gulp-less实现预处理

装置gulp-less,如果想应用其它css预编译语言，能够装置相干的gulp插件

npm install gulp-less -D

批改gulpfile.js

const { watch, task, dest, src, series } = require('gulp')const elecConnect = require('electron-connect').server.create() const less = require('gulp-less')// 款式批改应用electron-connect刷新，electron窗体function reload (cb) {  elecConnect.reload()  cb()}// 编译lessfunction lessCompier () {  return src('./*.less')  .pipe(less())  .pipe(dest('./'))}task('watch', function () {  elecConnect.start()  series(lessCompier)()  // 批改为监听less扭转  watch(['./theme.less'], series(lessCompier, reload))})

增加theme.less

#app{  height: 100%;  overflow: hidden;  background: linear-gradient(180deg, #3F4685 0%, #222648 100%);}

再次运行npx gulp watch,这时，只有你批改theme.less,页面也会主动刷新了。

其它

到这里，咱们的需要曾经切实。但仍然还有几个不完满的中央，比方每次启动electron咱们都须要从新登录下，能够这样解决下：

// 在main.js的dom-ready事件的回调函数外面// 判断下如果是进行了登录页面，主动输出明码并登陆if (/\/login\/$/.test(webUrl)) {  win.webContents.insertCSS('html, body { background-color: #f00; }')  // 上面输出你零碎的用户名，明码  win.webContents.executeJavaScript(`    $("#username")[0].value="admin";    $("#password")[0].value="123456";    $("form[name=login]")[0].submit();  `, true)  .then(() => {    console.log('login success')  })  .catch(err => {    console.log('login Error:', err)  })  return false}

如果感觉，心愿每次都间接登陆，并跳转到具体看板，咱们能够粥在main.js的dom-ready事件的回调函数前面增加代码：

// href填入指定urlwin.webContents.executeJavaScript(`location.href="http://127.0.0.1:5000/superset/dashboard/births/"`)

以上，残缺代码: theme-editor。

有时，咱们想做的可能更简单，比方对小图片转base64,对于未转base64的图片心愿能够主动输入到指定目录并在css文件中做替换，压缩css代码，打包前先压缩图片等等，这些gulp都有相应的插件去实现。相应能够看theme-editor,dev分支的gulpfile文件。