Question

我试图为我的反应网络应用程序进行服务器端渲染。

在我的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它返回错误：窗口没有定义）？< / p>

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!。

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

1 个答案: