How to import CSS files into webpack?

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']    }  ]}

For some reason; nothing worked for me so I added the css file to my list in entry:

// webpack.config.jsmodule.exports = {  // ...  entry: ["./src/style.css", "./src/index.js"]  // ...}