Webpack Not Loading CSS

Webpack not loading css

Since you are using style-loader and css-loader. You can include css in the js file itself. You can just require(style.css) or import 'style.css' (if using ES6) in the javascript file which is using the styles. No need to provide an entry point to webpack for css.

Hope it helps.

Webpack css-loader is not importing CSS

@gopigorantala is right.

Change the loader to one of these, it should work:

use: ['style-loader', 'css-loader']

or

use: [MiniCssExtractPlugin.loader, 'css-loader']

You probably won't need to use ExtractTextPlugin. Just use MiniCssExtractPlugin. It'll work.

The style-loader loads the styles into DOM with <style> at runtime, and MiniCssExtractPlugin extract them to a separate file. So you don't need to use both of them.

Webpack not recognizing CSS files even with the appropriate loaders installed

I realized my mistake, Here's the culprit.

Yes, the regexp I used was the problem (face palms). I replaced it with /(\.css)$/ and everything worked fine. If someone in the future finds this helpful, you better thank me. I lost way too many hairs on my scalp trying to solve this dumb mistake.

Webpack css-loader not handling the css although the configuration appears to be alright

Try replacing your webpack.config.js with:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

Note the order:

1. style-loader first
2. css-loader second

the configuration is order sensitive, and it's exactly like this in webpack documentation:
https://webpack.js.org/loaders/style-loader/#root

webpack style loader and css loader not working for simple example

You need to import your css file in your main index.js file. You can do this by adding import './style.css';

Updated index.js

import _ from 'lodash';
import './style.css';

function component() {
  let element = document.createElement('div');

  // Lodash, currently included via a script, is required for this line to work
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  element.classList.add('hello');
  return element;
}

document.body.appendChild(component());

CSS Loader in Webpack config is not working

Since you are loading the css file from node_modules package but you set css loader with include only your source path. I suggest to either remove that:

{
  test: /\.css$/,
  use: [
    ExtractCssChunks.loader,
    'css-loader',
    'postcss-loader'
  ],
},

Or put more package into your list, it's up to you:

{
  test: /\.css$/,
  use: [
    ExtractCssChunks.loader,
    'css-loader',
    'postcss-loader'
  ],
  include: [path.resolve(config.srcDir, 'styles'), /node_modules/\react-date-range /]
},

---

Related Topics