Webpack not loading css

Question

This is my first time trying to set up Webpack, so I'm sure I'm missing something here.

I am trying to load my PostCSS files with Webpack, using the ExtractTextPlugin to generate a css file into "dist". The problem is Webpack does not seem to pick up the css files. They are under "client/styles", but I've tried moving them to "shared", with the same result.

I ran Webpack with the --display-modules option, and verified that no css files display there.

I have tried running it without the extract text plugin, and the result is the same: no CSS is built into bundle.js.

Here is my prod config:

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');

module.exports = {
  entry: [
    './client'
  ],
  resolve: {
    modulesDirectories: ['node_modules', 'shared'],
    extensions: ['', '.js', '.jsx', '.css']
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    chunkFilename: '[id].js',
    publicPath: '/'
  },
  module: {
    loaders: [
      {
        test:    /\.jsx?$/,
        exclude: /node_modules/,
        loaders: ['babel']
      },

      {
        test: /\.css?$/,
        loader: ExtractTextPlugin.extract(
          'style-loader',
          'css-loader!postcss-loader'
        ),
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('[name].css')
  ],
  postcss: (webpack) => [
    require('postcss-import')({ addDependencyTo: webpack, path: ['node_modules', 'client'] }),
    require('postcss-url')(),
    require('precss')(),
    require('postcss-fontpath')(),
    require('autoprefixer')({ browsers: [ 'last 2 versions' ] })
  ]
};

And here's an example of my main css file: @import 'normalize.css/normalize';

/* Variables */
@import 'variables/colours';

/* Mixins */

/* App */

/* Components */

body {
  background-color: $black;
}

Would anyone have an idea on why this is happening? Am I missing something?

Thank you

Heinrike

Answer 1

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.

Dysart

Thank you for the tip. :) In my case, I'm dealing with an isomorphic application, so I need the styles to load before the JS, or else there will be a FOUC. However, will keep that in mind for other situations. – Heinrike

Then use have a look at isomorphic style loader, it solves the FOUC issue. It is an extension of style loader for isomorphic apps. – Dysart

Answer 2

So, after three hours of hitting my head against the wall, I finally got it. I hope this will help someone in the future.

All I needed to do was to add './client/styles/main.css' to the entry points. Yey.

Heinrike

Answer 3

For me, I had "sideEffects": false in my package.json, which caused webpack not to emit CSS.

Tonsillitis

Thanks @frodo2975! In my case there were specific files in sideEffects ("sideEffects": [ fileA.js, fileB.js]) which also blocked the specific file I was trying to load. – Agamic

This was indeed helpful i was trying to figure why it is not working – Bourgeois

Answer 4

Not directly related to the OP's problem, but here was my problem (my CSS wasn't loading either).

Personally, I was missing the style-loader package: https://webpack.js.org/guides/hot-module-replacement/#hmr-with-stylesheets

Caddis

Right, in my case I just forgot to update both style-loader and css-loader after upgrading to webpack 5 – Ichnite

Thanks, had the exact same problem. – Carrot

Answer 5

In my case it was related with react-hot-loader. I was using webpack.HotModuleReplacementPlugin() and after deleting it CSS in my editor started working.

Boutwell

Just to make this info useful: what you're saying is that react-hot-loader handles hot module replacement, so webpack's plugin can be removed? thx – Protagonist