You can easily use TypeStyle to build static html files with encapsulated CSS. You can use this pattern to generate email and pdf template files. Since TypeStyle supports cssRaw all your css can be easily inlined into a single file making it easy to work with template rendering engines.

import {style, getStyles} from "typestyle";

import * as React from "react";

const className = style({

  color: 'red',

  fontSize: '30px'

});

const App = () =>

    <div className={className}>

      Hello World!

    </div>;

import * as ReactDOMServer from 'react-dom/server';

const html = ReactDOMServer.renderToStaticMarkup(<App />);

const css = getStyles();

const renderPage = ({html, css}) => `

  <html>

    <header>

        <style>${css}</style>

    </header>

    <body>

        <div>${html}</div>

    </body>

  </html>

`;

const renderedPage = renderPage({html, css});

import * as fs from 'fs';

fs.writeFileSync(__dirname + '/index.html', renderedPage);

[TypeStyle] Generate static css + html files using TypeStyle的更多相关文章

  1. [TypeStyle] Load raw CSS in TypeStyle

    TypeStyle tries to be an all in one CSS in JS management solution so you can always fall back to raw ...

  2. [TypeStyle] Style CSS pseudo elements with TypeStyle

    Just like pseudo-classes, pseudo-elements are added to selectors but instead of describing a special ...

  3. GET /static/css/bootstrap.min.css.map HTTP/1.1" 404

    解决办法:删除bootstrap.min.css文件内容最后一行/*…………*/内容即可

  4. Export-XLSX PowerShell generate real Excel XLSX files without Excel and COM

    http://gallery.technet.microsoft.com/scriptcenter/Export-XLSX-PowerShell-f2f0c035

  5. Settings Django Static Files

    静态文件是通过django.contrib.staticfiles来管理的. 配置Django静态文件,Djang官网静态文件配置介绍.简言之,通过以下三个步骤来配置和加载静态文件: 设置静态文件别名 ...

  6. Django 静态文件配置(static files)

    Django version: 1.9 Python versrion: 3.5.2 这几天Django配置静态文件(本例是要加载index.css), 总是不对,最后终于试对了,这里记录下,方便以后 ...

  7. 【CSS】CSS3从入门到深入（复习查漏向

    CSS3从入门到深入(复习查漏向 pre_section CSS:层叠样式表,决定网页表现 网页为多层结构,CSS为每一层设置样式,最后显示最上一层 CSS语句 = 选择器 + 声明块 形式 内联样式 ...

  8. Express细节探究(1)——app.use(express.static)

    express相信是很多人用nodejs搭建服务器的首选框架,相关教程有很多,也教会了大家来如何使用.如果你想更深的了解他的细节,不妨和我一起来研究一下. 先来看一个每个人都用到的方法app.use( ...

  9. 前端自动化(三) 合并压缩css、压缩js、添加时间戳、打包上线操作

    前端自动化(三)   合并压缩css.压缩js.添加时间戳.打包上线操作 此文在前两篇基础上对比参考,会很方便理解 gulp.task("delete",function(){ r ...

随机推荐

  1. mybatis的XML返回值类型报错

    昨天项目里一直报错说是一个文件里的返回值java.util.hashmap不对,然后去定位这个文件发现并没有问题,后来在全局搜索的帮助下查找了返回值类型为resultMap的文件里看到写的代码里有: ...

  2. factor---将素数分解为质数

  3. c#程序打包、机器代码生成(Ngen.exe)

    深入本机影像生成器(Ngen.exe)工具使用方法详解 先介绍一点背景知识:.Net程序在运行时会实时(JIT)编译,将.Net程序文件编译成cpu认识的汇编机器码.实时编译需要消耗额外的cpu和内存 ...

  4. wmic linux python

    sudo aptitude install wmi-client Example of usage is; wmic -U DOMAIN/administrator%password //10.99. ...

  5. Android-CheckBox 实现计算器

    源码下载地址:http://download.csdn.net/detail/wu20093346/7718055 使用CheckBox的OnCheckedChangeListener做事件触发,效果 ...

  6. 一些VPS

    https://www.perfectip.net                                        5美元/1C/4G/20G/10Thttps://www.hetzne ...

  7. php课程 12-40 抽象类的作用是什么

    php课程 12-40 抽象类的作用是什么 一.总结 一句话总结:定标准的 1.继承的关键词有哪两个? extendsparent 2.抽象类的实际意义是什么? 制造符合规范的产品你必须实现了抽象类里 ...

  8. Qt之输出控制

    简述 在Qt项目开发过程中,往往需要对程序的一些信息进行控制,比如:打印日志.调试信息等,便于我们后期查找.跟踪及定位问题. 下面,我们来分享下常用的几种方式. 简述 示例代码 应用程序输出 控制台输 ...

  9. Codefroces 760 B. Frodo and pillows

    B. Frodo and pillows time limit per test 1 second memory limit per test 256 megabytes input standard ...

  10. easyui树查找

    前端查询 /* 树查询*/ function searchMaterial(){ var parentNode=$('#selectMaterialTree').tree('getRoots'); / ...