webpack extract css into separate file using extract-text-webpack-plugin

Question

i am trying to extract all .css into a separate file using webpack. To do this i am using xtract-text-webpack-plugin.

for some reason i am not getting any file out put after running web pack.

here is my webpack.config file

var path = require('path');
var webpack = require('webpack');

const ExtractTextPlugin = require('extract-text-webpack-plugin');

const css = new ExtractTextPlugin('styles/[name].css');

module.exports = {
    entry: [
        './App/main.js'
    ],
    output: {
        path: path.join(__dirname, '/wwwroot/js/'),
        filename: '[name].js',
    },
    resolve: {
        extensions: ['.css']
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                use: 'css-loader'
            })
        }]
    },
    plugins: [
        css
    ],

}

this is the output i get in console

Hash: 81acf65502ca13764b09
Version: webpack 3.2.0
Time: 71ms
  Asset     Size  Chunks             Chunk Names
main.js  2.62 kB       0  [emitted]  main
   [0] multi ./App/main.js 28 bytes {0} [built]
   [1] ./App/main.js 27 bytes {0} [built]

no .css file in my wwwroot folder. any idea why this is happening?

here is package.json file

"dependencies": {},
  "devDependencies": {
    "css-loader": "^0.28.4",
    "extract-text-webpack-plugin": "^3.0.0",
    "webpack": "^3.2.0"
  }

Thank you!

Answer 1

i was able to figure this out.

my webpack configuration was correct.

there are 2 ways of doing this

1st way you can require .scss and it will provide an entry point for css files.

2nd way you can create second entry point in your webpack

 entry: {
        index: "./scripts/index.js",
        vendor: "./styles/yourcss.css"
    }

Answer 2

There are many ways to do this. Here's the way that I have been doing....

module: {
            rules: [
                {
                    test: /\.css$/, use: ExtractTextPlugin.extract(
                        { use: isDevBuild ? 'css-loader' : 'css-loader?minimize' }
                    )
                }
        },
        output: { path: path.join(__dirname, clientBundleOutputDir) },
        plugins: [
            new ExtractTextPlugin('site.css')

All my CSS with this configuration, gets extracted into a single site.css file.