Webpack bundle returns 'Cannot find module' for CSS

Question

I have an app which folders are structured like this:

 /app/
    |- /assets/
    |   |- /css/
    |       |- myapp.css
    |- index.html
    |- index.js
 /dist/
 /node_modules/
 .babelrc
 package.json
 webpack.config.js

myapp.css is a simple, plain css, with nothing special. Just a styling on body to see if it was working. And my webpack.config.js file has this:

// In webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});
module.exports = {
  entry: [
    './app/index.js'
  ],
  output: {
    path: __dirname + '/dist',
    filename: "index_bundle.js"
  },
  module: {
    loaders: [
      {test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"},
      {test: /\.css$/, loaders: ['style', 'css']}
    ]
  },
  plugins: [HTMLWebpackPluginConfig]
};

I have put the required css file on index.js like this:

var React = require('react');
var ReactDOM = require('react-dom');

require('assets/css/myapp.css');

var HelloWorld = React.createClass({
    render: function () {
        return (
            <div> Hello ReactJs</div>
        )
    }
});

ReactDOM.render(
    <HelloWorld />,
    document.getElementById('app')
)

I have tried all the ways to get it loaded, adding ../ before assets word, and everythig, but I just keep receiving this error on console: Error: Cannot find module "assets/css/myapp.css"

I have double check, and css-loader and style-loader are both on /node_modules folder.

What am I doing wrong? I am stuck on it for more than 3 hours, checking tens of tutorials, and I have done all specified. Thanks for the help!

Answer 1

Well... I just needed to add ./ to the require line, like this:

require('./assets/css/myapp.css');

Hope this helps someone else. Thanks, @QoP