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

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.