source maps - Webpack 2 - compile scss to css and miniffy, together with sourcemaps -

i'm new webpack (been using gulp since... forever).

however, i've decided use webpack. decided go webpack 2 (2.1.0-beta.20 currently). been looking over, still couldn't simple task "give webpack bootstrap.scss file (which imports other bootstrap partial scss files needed) , have returned bootstrap.custom.min.css , bootstrap.custom.min.css.map".

i have own bootstrap.scss file imports need bootstrap (not using of it), after custom custom-variables.scss file imported @ top, overwrite default bootstrap variables - colors, grid columns etc. anyway, i'm sure not relevant... issue compiling scss css custom output file name , sourcemap.

not make difference, start with, here's custom bootstrap.scss:

@import "custom-variables"; // overwrite default bootstrap variables /**  * twitter bootstrap  * copy/paste original bootstrap file, changed paths  */ // core variables , mixins @import "../../../../node_modules/bootstrap/scss/variables"; @import "../../../../node_modules/bootstrap/scss/mixins"; // , on... need. don't need tables, forms , few other. 

in addition this, have own style.scss need same (to have returned style.min.css , style.min.css.map).

as webpack.config.js file, have:

const webpack = require('webpack'); const autoprefixer = require('autoprefixer'); const extracttextplugin = require('extract-text-webpack-plugin'); const path = require('path');  const sassloaders = [     'css-loader',     'postcss-loader',     'sass-loader?indentedsyntax=sass&includepaths[]=' + path.resolve(__dirname, './dev') ];  const config = {     entry: {         'bootstrap.custom.min': ['./wp-bootstrap'], // file contains 1 line: require('./dev/css/overwrite/bootstrap/bootstrap.scss');         'style.min': ['./wp-style'], // file contains 1 line: require('./dev/css/style.scss');     },     module: {         loaders: [             {                 test: /\.scss$/,                 loader: 'file',                 // or, other examples i've found said use:                 // loader: extracttextplugin.extract({ fallbackloader: 'style-loader', loaders: 'css!sass' }),                 // if try that, get: "cannot read property 'query' of undefined"                 query: {                    name: '[name].css'                 }             }         ]     },     plugins: [         new extracttextplugin('[name].css')     ],     postcss: [         autoprefixer({             browsers: ['last 2 versions']         })     ],     resolve: {         modules: [             path.resolve('./'),             'node_modules'         ]     } };  module.exports = config; 

these related packages have installed:

"devdependencies": {     "autoprefixer": "^6.4.0",     "css-loader": "^0.23.1",     "extract-text-webpack-plugin": "^2.0.0-beta.3",     "node-sass": "^3.8.0",     "postcss-loader": "^0.9.1",     "sass-loader": "^4.0.0",     "style-loader": "^0.13.1",     "webpack": "^2.1.0-beta.20"   } 

if use version of extract-text-webpack-plugin <2.x, other errors, it's not compatible webpack 2.

so, baby steps in code above... tried @ least obtain bootstrap.scss , style.scss transformed 2 separate css files: bootstrap.custom.min.css , style.min.css (don't know sourcemaps yet).

this come after searching google , trying follow examples. no solid tutorial out there make me understand how use webpack need accomplish. i'm guessing here, blind-folded.

but when type webpack in console , hit enter, don't css file, instead following 3 files:

1. bootstrap.css - exact same content source bootstrap.scss, copies file content over, instead of compiling scss css;
2. bootstrap.custom.min.js has bunch of javascript code in it;
3. style.min.js - has bunch of javascript code in it.

i've been stuck here days, didn't rest need (sourcemaps , destination folder of choosing css files , css.map files).