Can't make it work, the css files aren't builded

[matiasfha]

This is my current setup

var path              = require( 'path' );
var webpack           = require( 'webpack' );
var merge             = require( 'webpack-merge' );
var HtmlWebpackPlugin = require( 'html-webpack-plugin' );
var autoprefixer      = require( 'autoprefixer' );
var ExtractTextPlugin = require( 'extract-text-webpack-plugin' );

// detemine build env
var TARGET_ENV = process.env.npm_lifecycle_event === 'build' ? 'production' : 'development';
// common webpack config
var commonConfig = {

  output: {
    path:       path.resolve( __dirname, 'dist/' ),
    filename: 'bundle.[hash].js',
  },

  resolve: {
    modulesDirectories: ['node_modules'],
    extensions:         ['', '.js', '.elm']
  },

  module: {
    loaders: [
      {
        test: /\.(eot|ttf|woff|woff2|svg)$/,
        loader: 'file-loader'
      }
    ]
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      inject:   'body',
      filename: 'index.html'
    })
  ],

  postcss: [ autoprefixer( { browsers: ['last 2 versions'] } ) ],

}

// additional webpack settings for local env (when invoked by 'npm start')
if ( TARGET_ENV === 'development' ) {
  module.exports = merge( commonConfig, {

    entry: [
      'webpack-dev-server/client?http://localhost:8080',
      path.join( __dirname, 'src/index.js' )
    ],

    devServer: {
      inline:   true,
      progress: true
    },

    module: {
      loaders: [
        {
          test:    /Main\.elm$/,
          exclude: [/elm-stuff/, /node_modules/, /src\/.*\/StyleSheets\.elm$/],
          loader:  'elm-hot!elm-webpack?verbose=true&warn=true'
        },
        {
          test: /StyleSheets\.elm$/,
          loader: "style!css!elm-css-webpack"
          // loader: ExtractTextPlugin('style-loader', 'css-loader','elm-css-webpack')
        },
        {
          test: /\.css$/,
          loaders: [
            'style-loader',
            'css-loader',
            'postcss-loader'
          ]
        },
      ]
    }

  });
}

And inside src/Components/Navbar/ I have two files Style.elm with the style defintions

    module Components.Navbar.Style exposing (..)

import Css exposing (..)
import Css.Elements exposing (..)
import Css.Namespace exposing (namespace)
import Html.CssHelpers exposing (withNamespace)

type CssIds
  = NavbarContainer
  | Header

navbarNamespace: Html.CssHelpers.Namespace String a b c
navbarNamespace =
  withNamespace "navbar"

css : Stylesheet
css =
  (stylesheet << namespace navbarNamespace.name)
  [ (#) Header
    [
      backgroundColor (rgb 255 255 255),
      fontWeight (int 400),
      fontFamilies ["Roboto","Verdana","Arial", .value sansSerif],
      fontSize (px 14)
    ]
  , (#) NavbarContainer
    [
      backgroundColor (rgb 255 255 255),
      children
      [
        a [
          paddingLeft (px 5),
          display block,
          textDecoration none,
          backgroundColor transparent
        ],
        img [
          marginTop (px 5),
          height (px 40),
          maxWidth (px 100),
          border (px 0)
        ]
      ]
    ]
  ]

And Stylesheets.elm

    port module Stylesheets exposing (..)
import Css.File exposing (..)
import Components.Navbar.Style as Style
import Html exposing (div)
import Html.App as Html

port files : CssFileStructure -> Cmd msg

cssFiles : CssFileStructure
cssFiles =
  toFileStructure [ ( "navbar.css", compile Style.css )]

main : Program Never
main =
  Html.program
  { init = ( (), files cssFiles)
  , view = \_ -> (div [] [] )
  , update = \_ _ -> ( (), Cmd.none )
  , subscriptions = \_ -> Sub.none
  }

But after run webpack I see that the index.html file was injected only with the js output.

What I'm missing?