如何强制电子根据新的 css 更新渲染?

我正在尝试在Windows 10上构建一个电子应用程序(我的第一个((使用Visual Studio Code和Git Bash作为工具(，由于某种原因，我的应用程序只是停止了基于css更改的更新。特别是，我有一个搜索框，我一直在使用不同的引导表单输入样式来玩它。但是，当我决定将所有这些删除并放入香草 html 表单时，我仍然会得到花哨的引导输入。

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

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

package.json：

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

主.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-cachen"})
// 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();
}
}
]
});
}

主窗口.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>

我将非常感谢你们的任何见解！我是电子新手，希望有一些简单的事情可以解决这个问题。谢谢！

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

在我开始遇到问题之前，我一直在尝试引导搜索栏样式。我尝试的最后一个引导样式是与材质.css文本输入样式完全相同的风格，我什至自行更改了引导样式，使其具有与材质完全相同的"活动"颜色.css默认情况下使用。

当我拿走引导程序尝试自己造型时，什么也没发生......输入保持不变。我认为这显然意味着某处有缓存。然而，事实证明，材质.css只是具有与我使用 bootstrap 创建的完全相同的样式，而材质.css不需要您在设置元素样式之前向元素添加任何特殊的类标签，所以我从未怀疑过。去除材料.css立即解决了问题。

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

相关内容

最新更新

热门标签：