title: Combining SCSS and CSS Into A Single File With WebPack
body: <p>I'm a newbie to webpack and I'm having trouble understanding how I can take a bunch of scss files and css files and merge them together with webpack (After transpiling the sass of course).</p>
  
  <p>With gulp, it was really obvious, as I can have 1 step the transpile the sass to css and then a step after that to concatenate them together.
  However with webpack, it looks like everything happens at the same time.</p>
  
  <p>This is a pretty basic requirement that I'm sure has an obvious answer to those more experienced.</p>
  
  <p>I've got to the point where I can successfully output a transpiled scss to css and seperately output a css file from css input, but I can't figure out how to stick them together using webpack.</p>
  
  <p>Below is my webpack.config.js file:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const path = require('path');
  const webpack = require('webpack');
  
  var ExtractTextPlugin = require('extract-text-webpack-plugin');
  
  const extractCSS = new ExtractTextPlugin('extractedCSS.css');
  
  const extractSass = new ExtractTextPlugin({
      filename: "extractedSASS.css",
      disable: process.env.NODE_ENV === "development"
  });
  
  module.exports = function (env) {
      return {
          context: path.resolve(__dirname, './wwwroot/app'),
          entry: {
              main: './index.js',
              vendor: 'moment'
          },
          output: {
              filename: '[name].[chunkhash].js',
              path: path.resolve(__dirname, './wwwroot/mytempdist')
          },
          module: {
              rules: [{
                  test: /\.css$/,
                  use: extractCSS.extract({
                      use: 'css-loader'
                  })
              },
              {
                  test: /\.scss$/,
                  use: extractSass.extract({
                      use: [{
                          loader: "css-loader"
                      }, {
                          loader: "sass-loader"
                      }],
                      // use style-loader in development
                      fallback: "style-loader"
                  })
              }
              ]
          },
          plugins: [
              new webpack.optimize.CommonsChunkPlugin({
                  name: 'vendor',
                  minChunks: function (module) {
                      // this assumes your vendor imports exist in the node_modules directory
                      return module.context &amp;&amp; module.context.indexOf('node_modules') !== -1;
                  }
              }),
              //CommonChunksPlugin will now extract all the common modules from vendor and main bundles
              new webpack.optimize.CommonsChunkPlugin({
                  name: 'manifest' //But since there are no more common modules between them we end up with just the runtime code included in the manifest file
              }),
              //new webpack.optimize.UglifyJsPlugin({
              //    sourceMap: options.devtool &amp;&amp; (options.devtool.indexOf("sourcemap") &gt;= 0 || options.devtool.indexOf("source-map") &gt;= 0)
              //}),
              extractSass,
              extractCSS
          ],
          devtool: 'inline-source-map'
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can I modify the above to make both the sass and css go into the file css output file?</p>
  
  <p>Incase it makes a difference, below is an exerpt from my index.js file (entry point) toastr is an npm package and pace is just a normal downloaded css file:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var toastr = require('toastr');
  import 'toastr/toastr.scss';
  
  import pace from './../lib/pace/pace.min.js';
  import './../lib/pace/pace.css';</code></pre>
  </div>
  </div>
  </p>