How to import CSS files into webpack?

Question

According to the documentation, CSS file should just be imported.

I am just starting with webpack and tried to import a CSS file but I get

Answer 1

You have to import them like any JavaScript module. That means, when the imported file is neither a relative path (starting with ../ or ./), nor an absolute path (starting with /), it is resolved as a module. By default webpack will look for modules in the node_modules directory (in the current directory and all parent directories). This is the same behaviour that Node.js uses.

To import webpack/static/css/myfile.css in webpack/entry.js you have to use a relative path.

import './static/css/myfile.css';

If you don't want to use a relative path, you can change the directories that webpack uses to find a module with the resolve.modules or you can use resolve.alias.

---

In your webpack config you also defined both module.rules and module.loaders. When webpack sees module.rules it ignores module.loaders completely, so your babel-loader wouldn't be used. You should only use module.rules.

module: {
  rules: [
    {
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: /node_modules/
    },
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }
  ]
}