sass - How to use webpack with extract-text-webpack-plugin to compile scss files to css -

i have created angular2 project angular material2 components. want customise theme have used webpack module create 1 single file scss files have used extract-text-webpack-plugin create individual files.

here webpack.config.js

var path = require('path') var webpack = require('webpack') var extracttextplugin = require("extract-text-webpack-plugin"); // multiple extract instances let extractcss = new extracttextplugin('[name].css');  module.exports = {     entry: [         '/src/assets/theme/'     ],     output: {         path: path.join(__dirname, 'dist'),         filename: 'index.js',         publicpath: '/dist/'     },      module: {         loaders: [             { test: /\.scss$/i, loader: extractcss.extract(['css', 'sass']) }         ]     },     plugins: [         extractcss     ] } 

and here script in package.json

"build:css": "webpack --config webpack.config.js" 

and command run

npm run build:css 

but showing

> webpack --config webpack.config.js  hash: a5e945c400552ce5350f version: webpack 3.3.0 time: 68ms    asset    size  chunks             chunk names index.js  2.6 kb       0  [emitted]  main    [0] multi /src/assets/theme/ 28 bytes {0} [built]  error in multi /src/assets/theme/ module not found: error: can't resolve '/src/assets/theme/' in 'd:\workspace\webadmin_blade_template_material2\webapp'  @ multi /src/assets/theme/  npm err! windows_nt 10.0.14393 npm err! argv "c:\\program files\\nodejs\\node.exe" "c:\\program files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build:css" npm err! node v6.9.5 npm err! npm  v3.10.10 npm err! code elifecycle npm err! webapp@1.0.0 build:css: `webpack --config webpack.config.js` npm err! exit status 2 npm err! npm err! failed @ webapp@1.0.0 build:css script 'webpack --config webpack.config.js'. npm err! make sure have latest version of node.js , npm installed. npm err! if do, problem webapp package, npm err! not npm itself. npm err! tell author fails on system: npm err!     webpack --config webpack.config.js npm err! can information on how open issue project with: npm err!     npm bugs webapp npm err! or if isn't available, can info via: npm err!     npm owner ls webapp npm err! there additional logging output above.  npm err! please include following file support request: 

problem entry, not able solve this? issue? missing something?

edited

i missing index.js in src/assets/theme/. here content of file

require('./theme.scss'); require('./custom.scss'); 

and installed css-loader , sass-loader.

to make working changed

loaders: [                 { test: /\.scss$/i, loader: extractcss.extract(['css', 'sass']) }             ] 

instead of css , sass css-loader , sass-loader.

the problem is, creating 1 single file sccss files in /dist/main.css file. how can create individiual files each scss file?