How to use this with SASS? about webfonts-loader HOT 10 CLOSED

module.exports =  {
          name: 'index',
	  context: __dirname,

	  entry: {
	        // Some javascript you want in the header (for now only jQuery..)
	  	iconfont: ['./assets/entries/iconfont.font'],
	        header: ["./assets/entries/header.js",],
	        tinymce: ["./assets/entries/tinymce.js",],
	        styles: ['./assets/entries/styles.scss'],  // this file includes all styles, because webpack does not work with extracttext in combination with commonschunks for sass files that are includes via the @import statement.
	  	datetimepicker: ['./assets/entries/datetimepicker.js'],
	  	landing: ['./assets/entries/landing.js'],
	  	manual_bootstrap_modal_loaded_event: ['./assets/entries/manual_bootstrap_modal_loaded_event'],
	  	// Extensions:
	  	fileupload: ['./assets/entries/fileupload.js'],
	  	desktop: ['./assets/entries/desktop.js'],
	  	mobile: ['./assets/entries/mobile.js'],
	  	print: ['./assets/entries/print.scss']  // All styles for printing
	    },
		 
	      
	  output: {
	      path: path.resolve('./assets/bundles/'),
	      filename: "[name]-[hash].js",
	      chunkFilename: "[name]-[id]-[chunkhash].js"
	  },

	  plugins: [
	        // add header (mainly jQuery)
	        new webpack.optimize.CommonsChunkPlugin({
	            name: "header",
	            minChunks: Infinity,
	        }),
	        // add common as a parent of everything (is used in everything)
	        new webpack.optimize.CommonsChunkPlugin({
	            name: "common",
	            chunks: ["landing"],
	            //minChunks: Infinity,
	        }),

		//new webpack.optimize.CommonsChunkPlugin({
		//  names: ['common', 'manifest'], // add manifest chunk
		//  minChunks: Infinity
		//}),
	        new ExtractTextPlugin({
	        	filename:'[name]-[chunkhash].css', 
	        }),
	        new webpack.ProvidePlugin({
	            // Here are all the global variables stated
		    $: "jquery",
		    jQuery: "jquery",
		    Mustache: "mustache",
		    c3: "c3"
 
		}),
    	    new WebpackChunkHash(),
	    new ChunkManifestPlugin({
	      filename: "chunk-manifest.json",
	      manifestVariable: "webpackManifest"
	    })
	  ], 

	  module: {
	    rules: [  
	        /// should always be first (for production not to break)  
		{ 
		test: /\.scss$/,
		exclude: ['node_modules', 'bower_components'],
		loader: ExtractTextPlugin.extract({ 
		        fallback: 'style-loader', 
			use: [
			      'css-loader?importLoaders=1',
          		      'postcss-loader',
			      'sass-loader'
			     ]
		     })
	      },
	      /// should always be second (for production not to break)  
		{
		test: /\.css$/,
		exclude: ['node_modules', 'bower_components'],
		loader: ExtractTextPlugin.extract({ 
		        fallback: 'style-loader', 
			use: [
			      'css-loader?importLoaders=1',
          		      'postcss-loader'
          		     ]
		     })
	      },
	    
	      
	      /*{  enables linting, would be cool if there weren't so many warnings
	         enforce: 'pre',
           	 test: /\.js$/,
                 loader: 'eslint-loader',		            
                 exclude: [ /node_modules/ ]
              },*/
              
                    {
			test: /\.font$/,
			loader: "style-loader!css-loader!webfonts-loader"
		    },
		    {
		      test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
		      loader: "url-loader?limit=100&mimetype=application/font-woff"
		    }, {
		      test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
		      loader: "url-loader?limit=100&mimetype=application/font-woff"
		    }, {
		      test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
		      loader: "url-loader?limit=100&mimetype=application/octet-stream"
		    }, {
		      test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
		      loader: "file-loader"
		    }, {
		      test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
		      loader: "url-loader?limit=100&mimetype=image/svg+xml"
		    },
	      { test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=1000' },
          
	      { test: /jquery[\\\/]src[\\\/]selector\.js$/, loader: 'amd-define-factory-patcher-loader' },
	      {test: require.resolve('offline-js/js/offline'), loader: 'exports-loader?window.Offline'},
	      {
            	test: require.resolve('jquery-form'),
            	loader: "imports-loader?define=>false"
        	},
             /*{ test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/,
              loader: "imports-loader?this=>window" }*/
	    ] // add all common loaders here
	  },
	  resolve: {
	    modules: [path.resolve(__dirname, "assets", "js", "apps"), 'node_modules', 'bower_components'],
	    extensions: ['.js','.jsx', '.scss'], //, '.css'],
            descriptionFiles: ["package.json", "bower.json"], // These JSON files are read in directories
	    alias: {
	      'jquery-ui/widget': 'blueimp-file-upload/js/vendor/jquery.ui.widget.js',
              "jquery": "jquery/src/jquery",
	    }
	  }
};

                    {
			test: /\.font$/,
			exclude: ['node_modules', 'bower_components'],
			loader: ExtractTextPlugin.extract({ 
				fallback: 'style-loader', 
				use: [
				      'css-loader?importLoaders=1',
		  		      'webfonts-loader'
		  		     ]
			     })
		    },

@font-face {
	font-family: "iconfont";
	src: url("/app-iconfont.3b1036efa0aa07fe1008c4c3ef458154.woff2") format("woff2"),
url("/app-iconfont.5b2854bc16fd0985efd431b2e938f6e6.eot?#iefix") format("embedded-opentype"),
url("/app-iconfont.9e46112d79582056ea36b0f413f24a72.woff") format("woff"),
url("/app-iconfont.3f67f866869b75b950e6c70070b5ac47.ttf") format("truetype");
}

.ico{
	line-height: 1;
}

.ico:before {
	font-family: iconfont!important;
	font-style: normal;
	font-weight: normal !important;
	vertical-align: top;
}
.ico-split_arrow:before {
	content: "\F104";
}
.ico-syringe:before {
	content: "\F105";
}