Question

我在未经修改的情况下使用以下内容（尝试将typeahead添加到项目中除外）：

在typeahead模块中有关于设置CSS的注释：

Browserify用户需要使用browserify-css（或类似的东西）来处理CSS捆绑，而Webpack用户需要在他们的webpack配置文件中使用css-loader和/或style-loader。

以下是示例中的库存Webpack配置：

    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"

显然，我对此做错了。我一直在谷歌搜索，但我有点难过：

我做错了让错误消失。
这些装载者究竟想要完成什么，以及为什么不提起它。

谢谢！

Answer 1

我认为这应该有效：

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

您需要安装css-loader和style-loader。不确定Webpack如何报告丢失的加载器。

Answer 2

请注意，模块的v0.5.x已停止直接在JS文件中使用CSS，因此这应该不再是问题。

就你原来的问题而言，菲利普的答案应该有效，但如果没有，你也可以尝试：

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

使用react-bootstrap-typeahead生成CSS错误

2 个答案: