の.cssモジュールの解析が反応のために

Question

インストールRodalのモーダルを失敗したが、私は

import 'rodal/lib/rodal.css'; 

を追加したとき、私はエラーを取得する - >

「./~/rodal/lib/rodal.css モジュールの解析でエラーが発生しましたが失敗しました」

babel.config.jsのように見えますが、他の人の回答をコピーしても問題は解決しません。これを必要とする他の誰のためのワーキングバージョン：以下 はbabel.config.jsがそれを呼び出し側コンポーネントが

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ある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" 
    } 
} 

を追加

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: './' 
    } 
}; 

ファイルであります。

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

Answer 1

あなたのエラーは、webpackがCSSファイルを解析する方法を知らないということです。

あなたはnpm install --save-dev style-loader css-loaderにし、あなたのWebPACKファイルに必要なこの問題を解決するには、

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

を次のようにこれらのローダーが含まれ、含ま.cssあなたはCSSローダー内を持っていることを確認する必要があり

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