VHa*_*Hax 5 yeoman yeoman-generator yeoman-generator-angular
我按照这些说明为我的应用程序:
https://github.com/yeoman/generator-angular#readme
我的索引(在构建之前)
<!-- 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 -->
我的dist索引(在文本编辑器中)
<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>
Dist索引(浏览器)
<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>
问题可能出在gruntfile.js中
http://plnkr.co/edit/r2hdhWY7olIw0pBHJ4VF?p=preview
提前感谢您的回答!
这是因为(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);
}
所以,你需要做的就是在less.js之前添加它
<script>
less = {
async: true
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.6.1/less.min.js"></script>
我没有使用 Angular，但有一个类似的问题，它<style type="text/css">body { display: none !important }</style>突然出现在标签末尾head，有效地渲染整个页面不显示任何内容。
我发现罪魁祸首是less.js。只需评论该行即可修复它。
| 归档时间： |
|
| 查看次数： |
2521 次 |
| 最近记录： |