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

【问题标题】：Apply css before rendering client (Isomorphic)在渲染客户端之前应用 css（同构）
【发布时间】：2015-09-17 14:16:17
【问题描述】：

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

我一直在尝试使用

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

require('sass/app);

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

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

【问题讨论】：

标签： javascript css sass webpack isomorphic-javascript

【解决方案1】：

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

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 文件