首页 文章

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

提问于
浏览
0

我正在尝试为我的反应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它返回错误:窗口没有定义)?

1 回答

  • 0

    这一行:

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

相关问题