Как я могу заставить электрон обновлять рендеринг на основе новых CSS? - PullRequest
1 голос
/ 25 сентября 2019

Я пытаюсь создать электронное приложение (мое первое) на Windows 10 (используя код Visual Studio и Git Bash в качестве инструментов), и по какой-то причине мое приложение просто перестало обновляться на основе изменений CSS.В частности, у меня есть окно поиска, с которым я поигрался, используя различные стили ввода начальной загрузки.Однако, когда я решил убрать все это и просто вставить ванильную html-форму, я все же получил причудливый ввод с начальной загрузкой.

Я могу успешно изменить html, добавив больше текста, который отображается в приложении, но, пока у меня есть элемент ввода текста, я получаю причудливый ввод в стиле начальной загрузки.Я попытался удалить электронный кэш для моего приложения, а затем попытался удалить весь каталог ~ / AppData / Roaming / myapp, но это не помогло.Затем я попытался создать новое приложение полностью в новой папке, перезапустить «npm install --save Electron», скопировал в мои html и js файлы (но не в любые другие файлы), и попытался снова ... и я все еще получаю загрузчикстилизованная форма!Я смотрел на решения, подобные описанному здесь ( Electron не использует обновленный файл CSS ), но без какой-либо заметной разницы.Я в полной растерянности, что делать, и могу только представить, что либо электрон где-то скрывает другой кеш, либо что-то код 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>

Буду очень признателен за любые идеи, которые вы, ребята, можете иметь!Я новичок в электронике и надеюсь, что есть что-то простое, что я могу сделать, чтобы решить эту проблему.Спасибо!

1 Ответ

0 голосов
/ 27 сентября 2019

Похоже, я страдал от невероятного совпадения, но теперь я решил эту проблему.

До того, как у меня возникла проблема, я пробовал стили начальной загрузки.Самый последний стиль начальной загрузки, который я пробовал, был точно таким же, как и стиль ввода текста material.css, и я даже сам изменил стиль начальной загрузки, чтобы иметь точно такой же «активный» цвет, как и материал.default.

Когда я убрал самозагрузку, чтобы попробовать самостоятельно стилизоваться, ничего не произошло ... Ввод остался прежним.Я предположил, что это, очевидно, означало, что где-то был кеш.Однако оказалось, что у material.css был точно тот же стиль, который я создал с помощью bootstrap, и material.css не требует добавления каких-либо специальных меток классов к элементам перед их стилизацией, поэтому я никогдаподозревал.Удаление material.css немедленно устранило проблему.

Определенно самое странное совпадение ошибок, которое я когда-либо испытывал на порядок.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...