Использование response-bootstrap-typeahead для генерации ошибок CSS

Я использую следующее без изменений (за исключением попытки добавить typeahead в проект):

React Bootstrap Typeahead

React Redux Универсальный горячий пример

В модуле typeahead есть примечание о настройке CSS:

Пользователям Browserify нужно будет использовать browserify-css (или что-то подобное) для обработки CSS-пакетов, в то время как пользователю Webpack нужно будет использовать css-loader и / или style-loader в своем конфигурационном файле webpack.

Вот стандартный конфиг 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"

Видимо, я что-то не так делаю. Я гуглил, но я немного озадачен:

  1. Что я делаю не так, чтобы ошибка ушла.
  2. Что именно пытаются сделать эти загрузчики, и почему это не происходит.

Спасибо!

Источник

2 ответа

Я думаю, что это должно работать:

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

И вам нужно иметь css-loader а также style-loader установлены. Не уверен, насколько хорошо Webpack сообщает об отсутствующих загрузчиках.

Источник

Обратите внимание, что v0.5.x модуля перестал требовать CSS непосредственно в файлах JS, поэтому это больше не должно быть проблемой.

Что касается вашего первоначального вопроса, ответ Филиппа должен сработать, но если нет, вы также можете попробовать:

{test: /\.css$/, include: /node_modules/, loader: 'style-loader!css-loader'}
Источник
Другие вопросы по тегам