渲染客戶端之前應用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頁面