Webpack 2 CSS-Module unterstützen

Question

Zur Zeit verschiebe ich mein aktuelles Projekt von Webpack 1 zu Webpack 2 und ich stoße auf einige Probleme mit css-Modulen, die vorher gut funktionierten. Insbesondere verwende ich css-loader und react-css-modules. Meine aktuelle Entwicklung Konfiguration ist die folgende:

test: /module\.css$/, 
use: [ 
     'style-loader', 
     { 
      loader: 'css-loader', 
      options: { 
       modules: true, 
       importLoaders: 1, 
       localIdentName: '[name]__[local]___[hash:base64:5]' 
      } 
     }, 
     'postcss-loader' 
    ] 

Es funktioniert gut. Für die Produktion verwende ich ExtractTextPlugin (Version 2.0.0-beta.4) und meine Webpack Konfiguration für diesen Fall geht so:

test: /module\.css$/, 
loader: ExtractTextPlugin.extract({ 
      fallbackLoader: 'style-loader', 
      loader: [ 
        { 
         loader: 'css-loader', 
         options: { 
          modules: true, 
          importLoaders: 1, 
          localIdentName: '[hash:base64:5]' 
         } 
        }, 
        'postcss-loader' 
        ] 
       }), 

In diesem Fall Build schlägt mit dem folgenden Fehler:

Module build failed: Error: composition is only allowed 
when selector is single :local class name 

Es scheint also so, als würde es keine lokalen Präfixe vorgeben. Es wird auch in der css-loader Dokumentation erwähnt:

Note: For prerendering with extract-text-webpack-plugin you should use css-loader/locals instead of style-loader!css-loader in the prerendering bundle. It doesn't embed CSS but only exports the identifier mappings.

Also habe ich versucht loader: 'CSS-loader/Einheimischen sowie Zugabe zu Optionen, aber leider nichts funktioniert.

Ich habe auch versucht, dieses Problem mit postcss postcss-modules Plugin zu beheben. Es behebt den Build, aber wenn ich versuche, meine Anwendung zu starten, sieht es so aus, als hätte es keine passenden Importe von css-Namenszuordnungen.

Answer 1

Für den Fall, dass jemand das gleiche Problem in der Zukunft haben wird. Für diese Version von ExtractTextPlugin (2.0.0-beta.4) sollten Sie Loader-Parameter in Webpack-1-Weise festlegen. Konkret:

loader: ExtractTextPlugin.extract({ 
     fallbackLoader: 'style-loader', 
     loader: [ 
      'css-loader?modules&importLoaders=1&localIdentName=[hash:base64:5]', 
      'postcss-loader' 
     ] 
    }), 

funktioniert gut für mich