Issue using extract-text-webpack-plugin

Question

I am trying to use the Extract Text Webpack Plugin, but I have not been able to generate a new css file for the compiled sass files.

webpack.config.js

var ExtractTextPlugin = require("extract-text-webpack-plugin");


module.exports = {
    entry   :   './src/app.js',
    output  :   {
        filename    :   './dist/bundle.js'
    },
    module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader','sass-loader']
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({
        filename : 'app.bundle.css'
    }),
  ]
}

package.json:

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.9",
    "extract-text-webpack-plugin": "^3.0.2",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.20.1",
    "webpack": "^3.11.0",
    "webpack-dev-server": "^2.11.1"
  }
}

app.js:

var css = require('../css/app.scss');

console.log("This is a test Hi from webpack !!!");

Answer 1

• I able to generate a new css file for the compiled sass files
• please go through repo for your reference working example

your configuration looks good only ,my be you miss the path or forgot load css file in index.html or may be you did not create any scss files

live example