2016-07-28 18 views
0

Ich schreibe gerade eine Electron App mit Bootstrap css. Aus irgendeinem Grund wird bootstrap-theme.min.css trotz bootstrap.min.css geladen, obwohl es in der umgekehrten Reihenfolge ist.CSS wird nicht geladen

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="UTF-8"> 
    <link type="text/css" rel="stylesheet" href="src/css/font-awesome.min.css"> 
    <link type="text/css" rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"> 
    <link type="text/css" rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap-theme.min.css"> 
    <link type="text/css" rel="stylesheet" href="src/css/styles.css"> 
    <link type="text/css" rel="stylesheet" href="src/css/tooltip.css"> 
    <title>Hello World</title> 
    <link rel="icon" href="src/img/favicon.ico"> 
    <script>window.$ = window.jQuery = require('jquery');</script> 
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script> 
    <script src="src/js/jquery-ui.min.js" type="text/javascript"></script> 
    <script>window.sigma = require('linkurious');</script> 
    <script src="node_modules/linkurious/dist/plugins.min.js" type="text/javascript"></script> 
    <script src="node_modules/dagre/dist/dagre.min.js" type="text/javascript"></script> 
    <script src="node_modules/bootstrap-3-typeahead/bootstrap3-typeahead.min.js" type="text/javascript"></script> 
    </head> 
    <body> 
    <div id="root"> 
    </div> 
    <script> 
     (function() { 
     const script = document.createElement('script'); 
     if (process.env.ENV === 'development '){ 
      script.src = 'http://localhost:9000/dist/bundle.js'; 
     }else{ 
      script.src = './dist/bundle.js'; 
     } 
     document.write(script.outerHTML); 
     }()); 
    </script> 
    </body> 

    <script> 
    // You can also require other files to run in this process 
    require('./renderer.js') 
    </script> 
</html> 

Als Beispiel ist hier die erwartete Ausgabe von Werkzeugen Chrom dev wenn eine Taste Inspektion:

Expectation

Und hier ist, was ich stattdessen bekommen:

Reality

Zusätzlich Hier ist die Registerkarte "Netzwerk" in den Entwicklungstools, in der die erste Themendatei angezeigt wird: Network Tab

Fehle ich etwas offensichtlich? Und gibt es eine Problemumgehung für dieses Problem?

Ein anderes Beispiel, das ist auf der gleichen App mit dem gleichen HTML außerhalb von Elektronen laufen.

Expected

Und heren innen Elektron:

enter image description here

Der Panel-Header-Stil innerhalb der Elektronen App wird nicht richtig angewandt durch die Bootstrap-Theme-Datei, während es außerhalb ist Elektron.

+0

Sie die Ladereihenfolge wechseln? Ich frage das, denn das wäre die offensichtliche Sache zu tun – Mark

+0

Ich habe das versucht, und das Thema lädt immer noch – CptJesus

+1

es spielt keine Rolle, in welcher Reihenfolge der Browser die CSS anfordert, was zählt, ist die Reihenfolge der Dateien verwiesen. Letztere übertrumpft erstere im Falle von Zusammenstößen. Da ich aber kein Gedankenleser bin, was genau ist das, ist es deiner Meinung nach falsch? Welche Regel/Attribut ist falsch/nicht angewendet/angewendet? – Jakumi

Antwort

0

Der Grund liegt in CSS Spezifität, das ist ein System, das die Wichtigkeit/Hierarchie von CSS-Selektoren regiert. Einfach gesagt, ein einzelner Klassenselektor hat eine niedrigere Spezifität als ein komplexerer Selektor, der aus einer Kette von Klassen/Tags/IDs besteht, was in Ihrem Fall passiert: .btn-success als Selektor hat eine niedrigere Spezifität als der Selektor dafür Regel zuerst in Ihrem Screenshot aufgeführt, da diese aus einer ganz bestimmten Kette von Selektoren besteht, die - in Kombination - "mehr zählen" als eine einzelne Klasse.

Hier ist ein hilfreicher Artikel über das Thema: https://css-tricks.com/specifics-on-css-specificity/

+0

Warum erhalte ich mit den gleichen 2 Stylesheets andere Ergebnisse außerhalb des Elektrons? Der erste Screenshot in jedem Beispiel läuft in Chrome, der zweite Screenshot läuft in einem Elektronencontainer. – CptJesus