Reactjs 同构React应用程序中的SCSS编译

我正在基于以下内容编写一个同构React应用程序：

虽然我不想使用示例中使用的css模块，但我想使用SCS。出于某种原因，我很难让他们工作。我的第一步是从服务器和客户端删除

css

webpack加载程序，用

scss

特定加载程序替换它们（以及删除

postsss

）：

但这会抛出

ReferenceError:当构建为样式加载器显然不适合服务器端渲染时，未定义窗口。所以我的下一个想法是使用。据我所知，要使其正常工作，我需要用他们的高阶组件
和样式来装饰我的组件
：

import React, { PropTypes } from 'react';
import classNames from 'classnames';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from '../assets/scss/common/index.scss';

const App = (props, context) => (
  <div className={classNames('app')}>
    <h1 className="home_header">Welcome!</h1>
    {props.children}
  </div>
);

export default withStyles(s)(App);

但是我仍然得到了
警告：失败的上下文类型：“WithStyles（App）”中没有指定必需的上下文“insertCss”。
有什么办法解决这个问题吗？更重要的是，难道没有更简单的方法吗？这似乎需要做很多额外的工作。
在进行服务器端渲染时，有几个部分需要使用webpack处理SCS编译。首先，您不希望节点尝试将
.scss
文件导入组件

因此，在网页包配置中设置一个全局变量
WEBPACK:true
：

plugins: [
    new webpack.DefinePlugin({
        'process.env': {
            WEBPACK: JSON.stringify(true),
        }
    })
],

在您的组件中，仅当webpack正在处理组件时（在构建或开发期间），才尝试导入
.scss
文件：

如果每个组件只有一个Sass文件（您应该这样做），那么这始终只是一行。如果需要，可以在
index.scss
中导入任何其他Sass文件

然后在配置中，您可能仍然需要css加载器，因此对于您的开发服务器，它应该是这样的：

{
    test: /\.s?css$/,
    loaders: ['style', 'css', 'sass']

},

对于您的构建配置，类似于以下内容：

{
    test: /\.s?css$/,
    loader: ExtractTextPlugin.extract('style', 'css!sass')
},

酷，这一个有效。但是我觉得我正在失去这个同构加载程序的一些优点，因为它应该只加载所需的最小css。在我的组件中使用这个webpack插件变量也不是有史以来最干净的解决方案，但现在我想我不得不接受它。
if (process.env.WEBPACK) require('../assets/scss/common/index.scss');

{
    test: /\.s?css$/,
    loaders: ['style', 'css', 'sass']

},

{
    test: /\.s?css$/,
    loader: ExtractTextPlugin.extract('style', 'css!sass')
},