的.css模块解析失败作出反应

安装Rodal情态动词，但是当我添加的.css模块解析失败作出反应

import 'rodal/lib/rodal.css';

我得到一个错误 - > “ERROR在./~/rodal/lib/rodal.css 模块解析失败”

环顾它似乎是一个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: './' 
    } 
};

来源

2017-03-01 Nicholas Ritson

你需要确保你有一个CSS装载机你的webpack配置文件。 Babel没有对CSS做任何事情，它只是处理JS。 – Aron

你的错误意味着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'] 
}

来源

2017-03-01 11:45:32

我已经用css更新了babel的原始邮编，但是仍然是相同的错误 –

@NicholasRitson您错误地包含了装载器。我已经用完整的加载器数组更新了我的答案。 –

谢谢你，再次更新它，但同样的错误仍然 –

的.css模块解析失败作出反应

回答

相关问题