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

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.

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.