.css- Modul Parse fehlgeschlagen

Question

installiert Rodal modals für Reagieren, aber wenn ich

import 'rodal/lib/rodal.css'; 

i einen Fehler hinzufügen -> "Fehler in ./~/rodal/lib/rodal.css Modul Parse fehlgeschlagen"

Beim Umschauen scheint es sich um ein Problem von babel.config.js zu handeln, aber selbst beim Kopieren einiger anderer Antworten bleibt das Problem bestehen. Im Folgenden finden Sie die babel.config.js

module.exports = { 
    entry: [ 
    './src/index.js' 
    ], 
    output: { 
    path: __dirname, 
    publicPath: '/', 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [ 
    { test: /\.js$/, exclude: /node_modules/, loaders: 'babel', query: { presets: ['react', 'es2015', 'stage-1'] } }, 
    { test: /\.css$/, loader: "style-loader!css-loader" } 
    ] 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 
    devServer: { 
    historyApiFallback: true, 
    contentBase: './' 
    } 
}; 

package.json

{ 
    "name": "frontend", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "repository": "", 
    "scripts": { 
    "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js", 
    "test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test", 
    "test:watch": "npm run test -- --watch" 
    }, 
    "author": "", 
    "license": "ISC", 
    "devDependencies": { 
    "babel-core": "^6.2.1", 
    "babel-loader": "^6.3.2", 
    "babel-preset-es2015": "^6.22.0", 
    "babel-preset-react": "^6.23.0", 
    "chai": "^3.5.0", 
    "chai-jquery": "^2.0.0", 
    "css-loader": "^0.26.2", 
    "jquery": "^2.2.1", 
    "jsdom": "^8.1.0", 
    "mocha": "^2.4.5", 
    "npm": "^4.3.0", 
    "react-addons-test-utils": "^0.14.7", 
    "style-loader": "^0.13.2", 
    "webpack": "^1.12.9", 
    "webpack-dev-server": "^1.14.0" 
    }, 
    "dependencies": { 
    "axios": "^0.15.3", 
    "babel-preset-stage-1": "^6.1.18", 
    "classnames": "^2.2.5", 
    "flexboxgrid": "^6.3.1", 
    "lodash": "^3.10.1", 
    "material-design-icons": "^3.0.1", 
    "material-ui": "^0.17.0", 
    "next": "^2.0.0-beta", 
    "react": "^15.4.2", 
    "react-carousel": "^3.3.0", 
    "react-dom": "^15.4.2", 
    "react-flexbox-grid": "^0.10.2", 
    "react-instantsearch": "^3.2.1", 
    "react-instantsearch-theme-algolia": "^3.2.1", 
    "react-redux": "^4.0.0", 
    "react-router": "^3.0.2", 
    "react-slick": "https://github.com/johntron/react-slick/archive/0.14.6-patch.tar.gz", 
    "react-tap-event-plugin": "^2.0.1", 
    "redux": "^3.0.4", 
    "redux-promise": "^0.5.3", 
    "rodal": "^1.4.0" 
    } 
} 

Die Komponente nannte es ist

import React, { Component } from 'react'; 
import Rodal from 'rodal'; 
import 'rodal/lib/rodal.css'; 

export default class ModalButton extends Component { 
    render() { 
    return (
     <div> 
     <h2>Hello</h2> 
     </div> 
    ); 
    } 
} 

EDIT Datei hinzufügen: Arbeits Version für alle anderen, die dies muss .

Answer 1

Ihr Fehler bedeutet, dass Webpack nicht wissen, wie CSS-Dateien zu analysieren

Um dieses Problem Sie npm install --save-dev style-loader css-loader und in Ihrer webpack Datei benötigen zu lösen schließen diejenigen Lader als

module: { 
    loaders: [ 
    { test: /\.js$/, exclude: /node_modules/, loaders: 'babel', query: { presets: ['react', 'es2015', 'stage-1'] } }, 
    { test: /\.css$/, loader: "style-loader!css-loader" } 
    ] 
} 

folgt und umfassen .css Erweiterung

resolve: { 
    extensions: ['', '.js', '.jsx', '.css'] 
}