使用 react-bootstrap-typeahead 产生 CSS 错误 [英] Using react-bootstrap-typeahead generating CSS errors
问题描述
我不加修改地使用以下内容(除了尝试将预先输入添加到项目中):
I'm using the following without modification (except for trying to add the typeahead to the project):
typeahead 模块中有一条关于设置 CSS 的说明:
There's a note in the typeahead module about setting up CSS:
Browserify 用户需要使用 browserify-css(或类似的东西)来处理 CSS 捆绑,而 Webpack 用户需要在他们的 webpack 配置文件中使用 css-loader 和/或 style-loader.
Browserify users will need to use browserify-css (or something similar) to handle the CSS bundling, while Webpack user will need to use css-loader and/or style-loader in their webpack config file.
这是示例中的常用 Webpack 配置:
Here is the stock Webpack config from the example:
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"
所以显然我做错了什么.我一直在谷歌搜索,但我有点困惑:
So apparently I'm doing something wrong with this. I've been googling but I'm a bit stumped about:
- 我做错了什么让错误消失.
- 这些加载程序究竟想完成什么,以及为什么没有完成.
谢谢!
推荐答案
我认为这应该可行:
{ test: /\.css$/, include: /node_modules/, loader: "style!css"}
并且您需要安装 css-loader
和 style-loader
.不确定 Webpack 报告丢失加载器的效果如何.
And you need to have css-loader
and style-loader
installed. Not sure how well Webpack reports on missing loaders.
这篇关于使用 react-bootstrap-typeahead 产生 CSS 错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!