2016-04-26 7 views
2

I ohne Änderung der folgende bin mit (außer versuchen, die typeahead dem Projekt hinzugefügt werden):reagieren-Bootstrap-typeahead Mit Erzeugungs CSS Fehler

React Bootstrap Typeahead

React Redux Universal Hot Example

Es gibt eine Notiz im typeahead-Modul über CSS einrichten:

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.

Hier ist der Bestand Webpack Config aus dem Beispiel:

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' } 
] 

Noch bin ich immer noch diesen Fehler:

[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) 

durch diese Gefolgt weiter unten:

[1] [require-hook] Trying to load "Token.css" as a "*.js" 

So offenbar etwas falsch mit diesem ich tue. Ich habe gegoogelt, aber ich bin ein bisschen ratlos über:

  1. Was ich falsch mache, um den Fehler weggehen zu lassen.
  2. Was genau diese Lader zu erreichen versuchen, und warum es nicht abholt.

Vielen Dank!

+0

Ich glaube, das Problem ist in 'webpack/webpack-isomorph-tools.js' sieht es aus wie sein nicht entworfen, um Ladestile von innerhalb von Drittanbieter-Modulen zu behandeln. –

Antwort

1

ich denke, das sollte funktionieren:

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

Und Sie brauchen css-loader und style-loader installiert haben. Nicht sicher, wie gut Webpack über fehlende Lader berichtet.

+0

Immer noch der gleiche Fehler :(... ich verifizierte beide sind installiert. –

+0

Ich bekomme den gleichen Fehler, aber ich benutze grunt. Leute haben vorgeschlagen, dass browserify-css den Trick tun wird, aber ich kann es nicht zur Arbeit bringen. –

0

Beachten Sie, dass v0.5.x des Moduls keine CSS mehr direkt in JS-Dateien benötigt, so dass dies kein Problem mehr sein sollte.

Soweit Ihre ursprüngliche Frage, Filip Antwort sollte funktionieren, aber wenn nicht, Sie könnten auch versuchen:

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