的.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模塊解析失敗作出反應

回答

相關問題