yeoman - 添加什么 <style type ="text/css">body { display : none ! important }</style>

标签 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>

分布索引 (浏览器)
<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>

关于yeoman - 添加什么 &lt;style type ="text/css">body { display : none ! important }&lt;/style&gt;,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35702313/

相关文章:

jhipster - 如何创建自定义蓝图?

gruntjs - 启用了 sourceMap 选项的 Uglify 与它应该引用的 filerev js 文件不匹配

yeoman - 我应该如何移动或删除 Yeoman Generator 中的文件?

javascript - Angularjs 和 yeoman 的当前位置

javascript - 应用程序模块不可用、拼写错误或忘记加载 - 在 grunt 构建之后

jquery - Bower:jquery 被声明为依赖项,但不知何故丢失

node.js - 无需模板的 Yeoman 复制目录

node.js - 作为生成 Node 进程启动时显示来自 GIt 的反馈

javascript - Yeoman - 复制目录

angularjs - Grunt 构建在 'Dist' 中遗漏了一个新目录