Reactjs 使用react引导typeahead生成CSS错误

Reactjs 使用react引导typeahead生成CSS错误,reactjs,webpack,Reactjs,Webpack,我正在使用以下未经修改的内容(尝试将typeahead添加到项目中除外): 在typeahead模块中有一个关于设置CSS的注释: Browserify用户需要使用Browserify css(或类似工具)来处理css绑定,而Webpack用户需要在其Webpack配置文件中使用css加载程序和/或样式加载程序 以下是示例中的股票网页包配置: loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['bab

我正在使用以下未经修改的内容(尝试将typeahead添加到项目中除外):

在typeahead模块中有一个关于设置CSS的注释:

Browserify用户需要使用Browserify css(或类似工具)来处理css绑定,而Webpack用户需要在其Webpack配置文件中使用css加载程序和/或样式加载程序

以下是示例中的股票网页包配置:

    loaders: [
  { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel?' + JSON.stringify(babelLoaderQuery), 'eslint-loader']},
  { test: /\.json$/, loader: 'json-loader' },
  { test: /\.less$/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!less?outputStyle=expanded&sourceMap' },
  { test: /\.scss$/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap' },
  { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
  { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
  { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
  { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
  { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" },
  { test: /\.css$/, loader: "css=style!css"}, // I added this line
  { test: webpackIsomorphicToolsPlugin.regular_expression('images'), loader: 'url-loader?limit=10240' }
]
但我仍然会遇到这样的错误:

[0] ./~/react-bootstrap-typeahead/css/Typeahead.css
[0] Module parse failed: /Users/myproject/react-redux-universal-hot-example/node_modules/react-bootstrap-typeahead/css/Typeahead.css Unexpected token (1:0)
[0] You may need an appropriate loader to handle this file type.
[0] SyntaxError: Unexpected token (1:0)
然后再往下走:

[1] [require-hook] Trying to load "Token.css" as a "*.js"
所以很明显我做了些错事。我一直在谷歌上搜索,但我有点困惑:

  • 我做错了什么使错误消失
  • 这些装载机到底想要完成什么,以及为什么它不把它捡起来

  • 谢谢

    我认为这应该行得通:

    { test: /\.css$/, include: /node_modules/, loader: "style!css"}
    

    您需要安装
    css加载器
    style加载器
    。不确定Webpack报告丢失的加载程序的效果如何。

    请注意,模块的v0.5.x不再直接在JS文件中要求CSS,因此这应该不再是一个问题

    就您最初的问题而言,菲利普的回答应该有效,但如果不行,您也可以尝试:

    {test: /\.css$/, include: /node_modules/, loader: 'style-loader!css-loader'}
    

    还是同样的错误:(…我验证了这两个都安装了。我得到了相同的错误,但我使用的是grunt。有人建议browserify css会起作用,但我无法让它工作。我相信问题出在
    webpack/webpack isomorphic tools.js
    中,它看起来不是为处理来自第三方模块内部的加载样式而设计的。