反应服务器端渲染：找不到模块样式加载器 css-loader

Question

我正在尝试为我的 react web 应用程序进行服务器端渲染。

在我的 React 组件中，我也尝试添加以下导入：

import '!style-loader!css-loader!font-awesome/css/font-awesome.min.css';

节点返回以下错误（我通过 babel-node 运行）：

module.js:487
    throw err;
    ^

Error: Cannot find module '!style-loader!css-loader!font-awesome/css/font-awesome.min.css'
    at Function.Module._resolveFilename (module.js:485:15)
    at Function.Module._load (module.js:437:25)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (D:/project/client/js/components/app.js:22:1)
    at Module._compile (module.js:569:30)
    at loader (D:\project\node_modules\babel-register\lib\node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (D:\project\node_modules\babel-register\lib\node.js:154:7)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)

Webpack 可以构建成功。

我的 webpack.config.js

const path = require('path');

const CSSModulesLoader = [
  'css?sourceMap&-minimize',
  'modules',
  'importLoaders=1',
  'localIdentName=[name]__[local]__[hash:base64:5]'
].join('&');

module.exports = {
  entry: './client/js/index.js',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }, {
        test: /\.css$/,
        loaders: ['style', CSSModulesLoader]
      }, {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url-loader?limit=10000&minetype=application/font-woff'
      }, {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file-loader'
      }
    ]
  }
};

如何解决这个错误？

还有一个问题是如何知道环境不是浏览器以及使用服务器端渲染和模块使用变量（如窗口）的最佳方式（在我的情况下是 https://github.com/LouisBarranqueiro/reapop 它返回错误：窗口未定义）？

Answer 1

这一行：

import '!style-loader!css-loader!font-awesome/css/font-awesome.min.css';

应该是这样的：

import 'path/to/font-awesome/css/font-awesome.min.css';

导入css时不需要!style-loader!css-loader!。