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

score 52 · Answer 1 · edited Aug 28 '16 at 12:36

52

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.

edited Aug 28 '16 at 12:36

simeg

1,889
2
26
34

answered Jan 23 '16 at 12:27

Claudia

863
1
7
7

score 25 · Accepted Answer · edited Nov 23 '18 at 03:52

25

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.

edited Nov 23 '18 at 03:52

Julxzs

737
1
7
21

answered Jan 23 '16 at 13:00

sandeep

2,098
1
10
13

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. – Claudia Jan 24 '16 at 07:59
1

Then use have a look at `isomorphic style loader`, it solves the FOUC issue. It is an extension of style loader for isomorphic apps. – sandeep Jan 24 '16 at 14:06

score 4 · Answer 3 · answered Feb 13 '21 at 20:00

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

answered Feb 13 '21 at 20:00

Drarig29

1,902
1
19
42

1

Right, in my case I just forgot to update both style-loader and css-loader after upgrading to webpack 5 – vldmrrr Oct 01 '21 at 21:03
Thanks, had the exact same problem. – Koray Tugay Nov 07 '21 at 19:30

score 4 · Answer 4 · answered Mar 12 '22 at 00:57

4

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

answered Mar 12 '22 at 00:57

frodo2975

10,340
3
34
41

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. – Curt Oct 21 '22 at 22:26

score 0 · Answer 5 · answered Mar 23 '21 at 08:47

0

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.

answered Mar 23 '21 at 08:47

Daniel Kamiński

73
6

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 – funder7 Nov 03 '21 at 22:30

Webpack not loading css

5 Answers5

Linked