我如何强制电子根据新 css 更新渲染？

Question

我正在尝试在 Windows 10 上构建一个电子应用程序（我的第一个）（使用 Visual Studio 代码和 Git Bash 作为工具），以及出于某种原因，我的应用只是停止了基于 css 更改的更新。特别是，我有一个搜索框，我一直在使用不同的 bootstrap 表单输入样式。然而，当我决定把所有这些都拿走并只放入一个普通的 html 形式时，我仍然得到了花哨的 bootstrap 输入。

我可以通过添加更多显示在应用程序中的文本来成功更改 html，但只要我有一个文本输入元素，我最终会得到花式风格的 bootstrap 输入.我尝试删除我的应用程序的电子缓存，然后我尝试删除整个 ~/AppData/Roaming/myapp 目录，但都没有帮助。然后我尝试完全在一个新文件夹中创建一个新应用程序，重新运行 "npm install --save electron"，复制到我的 html 和 js 文件（但不是任何其他文件），然后再次尝试......我仍然得到bootstrap 样式表！我已经查看了此处描述的解决方案 ()，但没有任何明显差异。我完全不知道该怎么做，只能想象电子在某个地方隐藏了另一个缓存，或者 Visual Studio 代码或 Git Bash 以某种方式隐藏了缓存，这让我很困惑超过。

这是我的项目中仅有的 3 个文件：

package.json:

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "",
  "devDependencies": {
    "electron": "^6.0.10"
  }
}

main.js:

const electron = require('electron');
const path = require('path');
const url = require('url');

// SET ENV
process.env.NODE_ENV = 'development';

const {app, BrowserWindow, Menu} = electron;

let mainWindow;

// Listen for app to be ready
app.on('ready', function(){

  // Create new window
  mainWindow = new BrowserWindow({});
  mainWindowURL = url.format({
    pathname: path.join(__dirname, 'mainWindow.html'),
    protocol: 'file:',
    slashes:true
  });

  mainWindow.webContents.session.clearCache(function(){})

  mainWindow.loadURL(mainWindowURL, {"extraHeaders":"pragma: no-cache\n"})
  // Quit app when closed
  mainWindow.on('closed', function(){
    app.quit();
  });

  // Build menu from template
  const mainMenu = Menu.buildFromTemplate(mainMenuTemplate);
  // Insert menu
  Menu.setApplicationMenu(mainMenu);

  // Clear cache from any previous sessions
  //mainWindow.webContents.session.clearStorageData();
  //win.once('ready-to-show', ()=>{win.show()})
  //const win = BrowserWindow.getAllWindows()[0];
  //const ses = win.webContents.session;

  //ses.clearCache(() => {});
});



// Add developer tools option if in dev
if(process.env.NODE_ENV !== 'production'){
  mainMenuTemplate.push({
    label: 'Developer Tools',
    submenu:[
      {
        role: 'reload'
      },
      {
        label: 'Toggle DevTools',
        accelerator:process.platform == 'darwin' ? 'Command+I' : 'Ctrl+I',
        click(item, focusedWindow){
          focusedWindow.toggleDevTools();
        }
      }
    ]
  });
}

mainWindow.html:

<!DOCTYPE html>
<html>
<head>
  <title>Miobium</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
  <!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">-->
  <!--<link rel="script" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">-->

  <style>
    .fullPageContainer{
    }
    #left_panel {
        background-color: white;
        height: 100vh;
        float: left;
        width: 20vw;
        border-right: 1px solid grey;
    }
    #main_panel{
        background-color: white;
        height: 100vh;
        float: right;
        width: calc(78vw - 2px);
    }
    input[type=text]{
      width: 80%;
      border: 1px solid grey;
      border-radius: 4px;
    }
    </style>
</head>
<body>
    <div class="fullPageContainer">

        <div id="left_panel">
            Tags
        </div>

        <div id="main_panel">
          Search
          <form>
            <input type='text'>
          </form>
        </div>

    </div>

  <script>
    const electron = require('electron');
    const {ipcRenderer} = electron;
  </script>
</body>
</html>

如果你们有任何见解，我将不胜感激！我是电子新手，希望我可以做一些简单的事情来解决这个问题。谢谢！

Answer 1

看来我遇到了一个令人难以置信的巧合，但我现在已经解决了这个问题。

在我开始遇到问题之前，我一直在尝试 bootstrap 搜索栏样式。我尝试的最后一个 bootstrap 样式与 material.css 文本输入样式完全相同，我什至自己更改了 bootstrap 样式以使其完全相同'active' 默认使用 material.css 颜色。

当我拿走 bootstrap 尝试自己设计样式时，没有任何反应...输入保持完全相同。我认为这显然意味着某处有缓存。然而，事实证明 material.css 与我用 bootstrap 创建的样式 完全相同 ，并且 material.css 不需要您添加任何特殊的 class 标签在样式化之前给元素，所以我从来没有怀疑过。删除 material.css 立即解决了问题。

绝对是我经历过的最奇怪的 bug 巧合。

我如何强制电子根据新 css 更新渲染？

How can I force electron to update rendering based on new css?

css

node.js

electron

browser-cache