Webpack error: Module not found: Error: Can't resolve css

JavaScript
1

I am trying to add styles to my project with Webpack. I added style-loader and css-loader to my dev dependencies. Webpack config file looks like this:

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

My file structure looks like this: 02 PM

To index.js file I am trying to add css with:

var React = require('react');
var ReactDom = require('react-dom');
var App = require('./components/App');
var css = require('styles.css');

if(typeof window !== 'undefined') {
ReactDom.render(
  <App />,
  document.getElementById("app")
);
}

I also tried version with:
import styles from 'styles.css'

It always returns the same error message:

ERROR in ./app/index.js
Module not found: Error: Can't resolve 'styles.css' in '/Users/zolotova/GitHub/to_do_list/app'
 @ ./app/index.js 4:10-31
Child html-webpack-plugin for "index.html":
     1 asset
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./app/index.html 551 bytes {0} [built]
       [2] (webpack)/buildin/global.js 509 bytes {0} [built]
       [3] (webpack)/buildin/module.js 517 bytes {0} [built]```

Thank you for any help! I was browsing for solutions, but nothing seems to solve this issue.
2

I had to use relative (starting with …/ or ./), or an absolute path (starting with /) to import styles with Webpack. Otherwise imported file is resolved as a module. More on this issue here:

1 Like
3

Congratulations on solving it, and thanks for following up and sharing what you found :slight_smile:

1 Like