Watch imported css files in webpack + postcss-loader

Question

I'm having a bit of trouble getting Webpack in combination with the postcss-loader to watch imported css files. They're being processed on the first run, but webpack does not recompile when I modify these files.

E.g.

I have my main css file where I import all css modules:

...
/* Base imports */
@import "base/base-imports";
...

In base imports I have for the sake of example applied a color to the body:

body {
  background: tomato;
}

I now set the background to another color tho debug whether the css file is reloaded, but isn't.

This is my webpack config:

var webpack           = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin')

var autoprefixer  = require('autoprefixer');
var precss        = require('precss');
var fontMagician  = require('postcss-font-magician');
var atImport      = require('postcss-import');



module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: "style-loader!css-loader!postcss-loader"
      }
    ],
  },
  postcss: function(webpack) {
    return [
      autoprefixer({ browsers: ['last 2 versions'] }),
      precss,
      fontMagician,
      atImport({
        path: './src/styles/*.css',
        addDependencyTo: webpack
      }),
    ];
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Custom template',
      template: 'src/index.html', // Load a custom template
      inject: 'body' // Inject all scripts into the body
    })
  ],
  devtool: 'source-map',
  devServer: {
    contentBase: './dist',
    hot: true
  },
}

Could you try to move atImport before precss? I guess that your imports is processed by precss instead of postcss-import. — Kreozot

Hoetmaaiers Hoetmaaiers · Accepted Answer · 2016-01-15T16:56:19

Okay,

This question had 2 things wrong, so the solution is:

Do atImport before precss, thank you @Kreozot.
Reference to the exact css filename. With this I mean is: @import "base/_base-imports" instead of @import "base/base-imports" if the filename is "_base-imports". It is not resolved like a sass partial.

Watch imported css files in webpack + postcss-loader

1 Answers