javascript - 在渲染客户端之前应用 css(同构)

Question

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

我一直在尝试使用

导入我的 sass 文件(以便 webpack 可以 sass=>css)

require('sass/app); 

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

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

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页面