I am having difficulty in getting CSS loading using css-loader on my JSX files. I was following the example from:
https://christianalfoni.github.io/react-webpack-cookbook/Loading-CSS.html
This is my JSX
import React from 'react'; import ReactDOM from 'react-dom'; import styles from './styles.css'; class Hello extends React.Component { render() { return <div>Hello world!</div> } } var el = document.getElementById('content') var data = JSON.parse(el.getAttribute('data-attr')) ReactDOM.render(<Hello data={data} />, el);`This is my package.json
"devDependencies": { "babel-core": "^6.3.26", "babel-loader": "^6.2.0", "babel-preset-es2015": "^6.3.13", "babel-preset-react": "^6.3.13", "css-loader": "^0.23.1", "exports-loader": "~0.6.2", "expose-loader": "~0.6.0", "grunt": "^0.4.5", "grunt-babel": "^6.0.0", "grunt-cli": "^0.1.13", "grunt-contrib-watch": "^0.6.1", "grunt-webpack": "^1.0.11", "history": "^1.17.0", "imports-loader": "~0.6.3", "jquery": "^2.1.4", "lodash": "~3.0.0", "react": "^0.14.5", "react-dom": "^0.14.5", "react-router": "^1.0.3", "style-loader": "^0.13.0", "webpack": "^1.12.9", "webpack-dev-server": "^1.14.0" }, "dependencies": { "chunk-manifest-webpack-plugin": "0.0.1", "grunt-react": "^0.12.3" }This is my Webpack.config.js
var path = require('path'); var webpack = require('webpack'); var config = module.exports = { // the base path which will be used to resolve entry points context: __dirname, // the main entry point for our application's frontend JS entry: './app/frontend/javascripts/entry.js', stats: { // Configure the console output colors: true, modules: true, reasons: true }, progress: true, keepalive: true, module: { loaders: [ { test: /\.js?$/, exclude: /(node_modules|bower_components)/, loader: 'babel-loader', // 'babel-loader' is also a legal name to reference query: { presets: ['es2015', 'react'] } }, { test: /\.css$/, loader: "style-loader!css-loader" } ] }, output: { // this is our app/assets/javascripts directory, which is part of the Sprockets pipeline path: path.join(__dirname, 'app', 'assets', 'javascripts'), // the filename of the compiled bundle, e.g. app/assets/javascripts/bundle.js filename: 'bundle.js', // if the webpack code-splitting feature is enabled, this is the path it'll use to download bundles publicPath: '/assets', devtoolModuleFilenameTemplate: '[resourcePath]', devtoolFallbackModuleFilenameTemplate: '[resourcePath]?[hash]', }, resolve: { // tell webpack which extensions to auto search when it resolves modules. With this, // you'll be able to do `require('./utils')` instead of `require('./utils.js')` extensions: ['', '.js'], // by default, webpack will search in `web_modules` and `node_modules`. Because we're using // Bower, we want it to look in there too modulesDirectories: [ 'node_modules', 'bower_components' ], }, plugins: [ // we need this plugin to teach webpack how to find module entry points for bower files, // as these may not have a package.json file new webpack.ResolverPlugin([ new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin('.bower.json', ['main']) ]), new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', }), //new webpack.optimize.CommonsChunkPlugin('common-bundle.js'), //new webpack.optimize.CommonsChunkPlugin('public-bundle.js') ] };This is my styles.css
#div { background-color: red; }The output I get from running my grunt task to run 'webpack' attached: You can see where it says the build failed for the CSS.
cjs require fbjs/lib/mapObject [154] ./~/react/lib/ReactDOMFactories.js 18:16-45 [157] ./~/react/lib/onlyChild.js 1.21 kB {0} [built] cjs require ./onlyChild [153] ./~/react/lib/ReactIsomorphic.js 24:16-38 [158] ./~/react/lib/deprecated.js 1.77 kB {0} [built] cjs require ./deprecated [3] ./~/react/lib/React.js 19:17-40 [159] ./~/react-dom/index.js 63 bytes {0} [built] cjs require react-dom [0] ./app/frontend/javascripts/entry.js 11:16-36 ERROR in ./app/frontend/javascripts/styles.css Module parse failed: /Users/Booboo/Projects/Xeon/app/frontend/javascripts/styles.css Line 1: Unexpected token { You may need an appropriate loader to handle this file type. | div { | background-color: red; | } @ ./app/frontend/javascripts/entry.js 5:0-23 Warning: Task "webpack:dev" failed. Use --force to continue. Aborted due to warnings. Booboo$ grunt react && grunt webpack && grunt watch
