Webpack Split scss in separate CSS-Dateien

Question

Ich schreibe eine React-Anwendung, mit Webpack und Sass. Jetzt möchte ich versuchen, diese CSS Modules, aber ich habe einige Probleme konfrontiert. Zuerst, wie ich verstehe, kann ich keine .scss-Module verwenden, deshalb ist meine Idee, .scss-Dateien in .css-Dateien zu konvertieren (zB link.scss -> link.css, main.scss -> main.css, usw.) und verbinden Sie sie dann mit React-Komponente. Aber ich kann nicht webpack meine .scss-Dateien in separate .css-Dateien teilen. Ich habe verschiedene Konfigurationen ausprobiert, aber die ganze Zeit bekomme ich main.css, die alle. SCS-Dateien verkettet. Ich denke, das ist nicht der beste Weg für mich.

Könnten Sie mir helfen, eine korrekte Konfiguration zu erhalten, um alle .scss-Dateien in .css zu teilen. Oder vielleicht gibt es eine andere Möglichkeit, .scss-Module in meiner App zu verwenden. Danke im Voraus.

Dies ist meine webpack Konfiguration

var webpack = require('webpack'); 
var path = require('path'); 
var ExtractTextPlugin = require("extract-text-webpack-plugin"); 

module.exports = { 
    devtool: 'inline-source-map', 
    entry: [ 
     'webpack-hot-middleware/client', 
     './src/index.jsx' 
    ], 
    output: { 
     path: path.join(__dirname, './dist'), 
     filename: 'bundle.js', 
     publicPath: '/' 
    }, 
    plugins: [ 
     new webpack.optimize.OccurenceOrderPlugin(), 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.NoErrorsPlugin(), 
     new ExtractTextPlugin("[name].[chunkhash].css", { allChunks: true }) 
    ], 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx$/, 
       loader: 'babel-loader', 
       exclude: /node_modules/, 
       query: { 
        presets: ['react', 'es2015', 'react-hmre'] 
       } 
      }, 
      { 
       test: /\.scss$/, 
       loader: ExtractTextPlugin.extract("style-loader", "css!autoprefixer-loader?browsers=last 15 versions!sass") 
      }, 
      { 
       test: /\.css$/, 
       loader: "style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]" 
      } 
     ] 
    } 
} 

Und hier ist meine Ausgabe in der Konsole:

Hash: d1d3f358c1680ba4f634 
Version: webpack 1.13.1 
Time: 4297ms 
         Asset  Size Chunks    Chunk Names 
        bundle.js  2.5 MB  0 [emitted] main 
main.582da1db7866d6b8684d.css 373 bytes  0 [emitted] main 
    [0] multi main 40 bytes {0} [built] 
    + 324 hidden modules 
Child extract-text-webpack-plugin: 
     + 2 hidden modules 
Child extract-text-webpack-plugin: 
     + 2 hidden modules 

Answer 1

Sie können Verwendung sass mit CSS-Modulen zusammen.

Es funktioniert nicht für Sie, weil Sie den css-Modulparameter für den css-Lader in der Sass-Loader-Definition nicht angegeben haben.

Im Folgenden sind zwei Möglichkeiten, sass mit CSS-Module zu konfigurieren:

Mit ExtractTextPlugin:

{ 
    test: /\.scss$/, 
    loader: ExtractTextPlugin.extract('style', '!css-loader?modules&localIdentName=[name]__[local]___[hash:base64:5]&sourceMap!sass?sourceMap') 
} 

Ohne ExtractTextPlugin:

{ 
    test: /\.scss$/, 
    loaders: ['style', 'css?modules&localIdentName=[name]__[local]___[hash:base64:5]&sourceMap', 'sass?sourceMap'] 
} 

Beachten Sie, dass, wenn die ExtractTextPlugin verwendet es ein CSS schaffen Datei. Wenn Sie eine Anzahl von CSS-Ausgabedateien haben möchten, können Sie das ExtractTextPlugin mehrmals definieren (siehe this als Referenz).