Webpack2 / postcss config question

[Matmo10]

I'm trying to apply postcss plugins to the css files specified in my my styleUrl's via postcss-loader. Their project has the following example for webpack2 config:

     {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: { importLoaders: 1 }
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: function () {
                return [
                  require('precss'),
                  require('autoprefixer')
                ];
              }
            }
          }
        ]
      }

My understanding of angular2-template-loader is that it basically turns styleUrls: ['some-file.css'] into styles: require('some.file.css'), which ultimately gets handled by some css loader.

Is that correct? The reason I'm questioning this is :

1. I tried to swap outstyle-loader with css-to-string loader in the config pasted above, but it doesn't seem to work (doesn't autoprefix the css).
2. The end of the README says "The generated require statements", (for templateUrl and styleUrls), "will be handled by the given loader for .html and .js files". I would expect that to say "for .html and .css files". Does this mean that the styleUrl generates some sort of .js file which isn't handled by a .css loader?

I asked about the setup on the postcss-loader repo (webpack-contrib/postcss-loader#113) but they were understandably unfamiliar with this particular loader and how it should integrate with other loaders. Is there anything obviously wrong with my approach or understanding of how this loader works? Thanks!

[Koslun]

I got postcss working by using the following config for my production build, using following package versions:

{
"autoprefixer": "6.6.1",
"angular2-template-loader": "0.6.0",
"postcss-loader": "0.9.1",
"raw-loader": "0.5.1",  
"webpack": "2.1.0-beta.27",
}

// necessary imports
const autoprefixer = require('autoprefixer');
const webpack = require('webpack');
const postcssDiscardComments = require('postcss-discard-comments');

// relevant rules
rules: [{
{
      test: /\.css$/,
      loaders: ['raw-loader', 'postcss-loader'] 
    }, {
      test: /.html$/,
      loaders: [
        'html-loader'
      ]
}]

// add to plugins array
 new webpack.LoaderOptionsPlugin({
    debug: false,
    options: {
      htmlLoader: {
        // minimize: false // workaround for ng2
        // see https://github.com/angular/angular/issues/10618#issuecomment-250322328
        minimize: true,
        removeAttributeQuotes: false,
        caseSensitive: true,
        customAttrSurround: [
          [/#/, /(?:)/],
          [/\*/, /(?:)/],
          [/\[?\(?/, /(?:)/]
        ],
        customAttrAssign: [/\)?\]?=/]
      },
      postcss: [
        autoprefixer,
        postcssDiscardComments
      ]
    }