Cosa c'è l'aggiunta di <style type = "text/css"> body {display: none importante}</style>

ho seguito queste istruzioni per la mia app:Cosa c'è l'aggiunta di <style type = "text/css"> body {display: none importante}</style>

https://github.com/yeoman/generator-angular#readme

mio indice (prima della costruzione)

<!-- Place favicon.ico and apple-touch-icon.png in the root directory --> 
    <!-- build:css(.) styles/vendor.css --> 
    <!-- bower:css --> 
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" /> 
    <!-- endbower --> 
    <!-- endbuild --> 
    <!-- build:css(.tmp) styles/app.css --> 
    <link href="app.less" type="text/css" rel="stylesheet/less"> 
    <!-- endbuild -->

mio indice dist (in editor di testo)

<html ng-app="myApp"> <head> <meta charset="utf-8"> <title>Datavalidering</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> <link rel="stylesheet" href="styles/vendor.2ac5f564.css"> <link rel="stylesheet" href="styles/app.d41d8cd9.css"> </head> <body>

indice Dist (browser)

<head> 
<style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style> 
<meta charset="utf-8"> 
<title></title> 
<meta name="description" content=""> 
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> 
<link rel="stylesheet" href="styles/vendor.2ac5f564.css"> <link rel="stylesheet" href="styles/app.d41d8cd9.css"> 
<style type="text/css">body { display: none !important }</style></head> 
<body>

Il problema può essere in gruntfile.js

http://plnkr.co/edit/r2hdhWY7olIw0pBHJ4VF?p=preview

Grazie in anticipo per le vostre risposte!

fonte

2016-02-29 VHax

Non sto utilizzando Angolare, ma ha avuto un problema simile in cui questo <style type="text/css">body { display: none !important }</style> appare all'improvviso alla fine del tag head, in modo efficace il rendering dell'intera pagina per non visualizzare nulla.

Ho scoperto che il colpevole era less.js. Semplicemente commentando la linea si corregge.

fonte

2016-03-04 01:57:47

Così si commento: ** ** fuori? Se lo faccio non sarò in grado di usare meno .. Grazie! – VHax

beh, almeno questo dovrebbe darti un'idea su dove iniziare a cercare. Nel mio caso, risulta che non avevo bisogno di Meno, quindi era una soluzione facile da prendere. –

Questo accade a causa di (less.js):

// Simulate synchronous stylesheet loading by blocking page rendering 
if (!options.async) 
{ 
    css = 'body { display: none !important }'; 
    head = document.head || document.getElementsByTagName('head')[0]; 
    style = document.createElement('style'); 

    style.type = 'text/css'; 
    if (style.styleSheet) { 
     style.styleSheet.cssText = css; 
    } else { 
     style.appendChild(document.createTextNode(css)); 
    } 

    head.appendChild(style); 
}

così, tutto quello che dovete fare è aggiungere questo prima less.js

<script> 
less = { 
    async: true 
} 
</script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.6.1/less.min.js"></script>

fonte

2016-03-07 21:11:47 Buksy

Grazie! Quindi, anche se ho ottenuto '<- costruzione:! (.) Js scripts/vendor.js -> 'Come così? – VHax

No, non ne hai bisogno, questo era solo un esempio per mostrare che less.js include * DEVE * venire dopo la configurazione – Buksy

Questo è un problema terribile. Chi, sano di mente, aggiungerebbe display non importante per il corpo ??? –

Cosa c'è l'aggiunta di <style type = "text/css"> body {display: none importante}</style>

risposta

Problemi correlati