Estoy tratando de crear una aplicación electrónica (la primera) en Windows 10 (usando Visual Studio Code y Git Bash como herramientas) y, por alguna razón, mi aplicación simplemente dejó de actualizarse en función de los cambios de CSS. En particular, tengo un cuadro de búsqueda con el que había estado jugando usando diferentes estilos de entrada de formulario de arranque. Sin embargo, cuando decidí eliminar todo eso y simplemente ponerlo en un formato html vanilla, todavía obtengo la entrada de arranque elegante.

Puedo cambiar con éxito el html agregando más texto que aparece en la aplicación, pero siempre que tenga un elemento de entrada de texto, termino con la entrada de arranque de estilo elegante. Intenté eliminar el caché de electrones de mi aplicación, y luego intenté eliminar todo el directorio ~ / AppData / Roaming / myapp, ninguno de los cuales ayudó. Luego intenté crear una nueva aplicación completamente en una nueva carpeta, volví a ejecutar "npm install --save electron", copié en mis archivos html y js (pero no en ningún otro archivo), y lo intenté de nuevo ... y todavía obtengo el bootstrap forma estilizada! He visto soluciones como la que se describe aquí ( Electron no usa el archivo CSS actualizado ) pero sin ninguna diferencia notable. No sé qué hacer y solo puedo imaginar que cualquiera de los dos electrones está escondiendo otro caché en algún lugar o que de alguna manera Visual Studio Code o Git Bash están escondiendo cachés en algún lugar que me están jodiendo.

Aquí están los únicos 3 archivos en mi proyecto:

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>

¡Agradecería mucho cualquier información que puedan tener! Soy un novato con el electrón y espero que haya algo simple que pueda hacer para solucionar este problema. ¡Gracias!

1
wanderingmathematician 25 sep. 2019 a las 00:08

1 respuesta

La mejor respuesta

Parece que he estado sufriendo una coincidencia increíble, pero ahora he resuelto el problema.

Antes de cuando comencé a tener el problema, había estado probando estilos de barra de búsqueda de arranque. El último estilo de arranque que probé fue EXACTAMENTE el mismo que el estilo de entrada de texto de material.css, e incluso había cambiado el estilo de arranque por mi cuenta para tener exactamente el mismo color 'activo' que material.css usa por defecto.

Cuando quité el bootstrap para probar el estilo por mi cuenta, no pasó nada ... La entrada se mantuvo exactamente igual. Supuse que esto obviamente significaba que había un caché en alguna parte. Sin embargo, resultó que material.css tenía exactamente el mismo estilo que había creado con bootstrap, y material.css no requiere que agregue etiquetas de clase especial a los elementos antes de diseñarlos, así que nunca sospechado. La eliminación de material.css solucionó inmediatamente el problema.

Definitivamente la coincidencia de errores más extraña que he experimentado por órdenes de magnitud.

0
wanderingmathematician 27 sep. 2019 a las 19:23