.css模块解析失败

Question

为React安装了Rodal modals，但当我添加

import 'rodal/lib/rodal.css';

我收到一个错误-> "ERROR in ./~/rodal/lib/rodal.css Module parse failed“

环顾四周，这似乎是一个babel.config.js问题，但即使是在抄袭其他人的答案时，这个问题仍然存在。下面是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"
  }
}

调用它的组件是

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>
    );
  }
}

编辑:为任何其他需要它的人提供的工作版本。

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扩展

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