在渲染客户端之前应用 css（同构）

Question

我是运行一个使用 React 和 webpack 的同构应用程序，一切都很好。我正在努力处理的一件事是在渲染组件之前预加载 css。

我一直在尝试使用

导入我的 sass 文件（因此 webpack 可以 sass=>css）

require('sass/app);

然而，这仍然只在客户端加载后应用。

我似乎可以避免这种情况的唯一方法是使用链接在中的良好旧样式表，这意味着我将失去 css.

的所有 webpack 好东西

Answer 1

使用 Webpack ExtractTextPlugin 从应用中的 require 样式生成外部样式表！

var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
    module: {
        loaders: [
            { test: /\.scss$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader", "sass-loader") }
        ]
    },
    plugins: [
        new ExtractTextPlugin("styles.css")
    ]
}

示例改编自来源github页面

在渲染客户端之前应用 css（同构）

Apply css before rendering client (Isomorphic)

javascript

css

sass

webpack

isomorphic-javascript