reactjs - Webpack split scss into separate css files -

i'm writing react application, using webpack , sass. want try css modules, i've faced troubles. first, understand, can't use .scss modules, that's why idea convert .scss files .css files (eg. link.scss -> link.css, main.scss -> main.css, etc.) , connect them react component. can't make webpack split .scss files separate .css files. i've tried different configurations, time main.css, concatenates .scss files. guess not best way me.

so, me correct configuration split .scss files .css. or maybe there way use .scss modules in app. in advance.

this webpack configuration

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]"             }         ]     } } 

and here output in console:

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 

you can use sass css modules together.

it doesn't work because did not specify css modules parameter css loader in sass loader definition.

below 2 ways configure sass css modules:

with extracttextplugin:

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

without extracttextplugin:

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

note when using extracttextplugin create 1 css file. if want number of css output files define extracttextplugin multiple times (see this reference).