Webpack does not collect css, what should I do?

Question

webpack

Friends, I've tried everything. But it’s not like I can’t create a css file, it creates a second js where it stores the styles. I downloaded and connected ExtractTextPlugin, did everything as shown in the screencasts, but still nothing comes out. I googled it, it's the same everywhere, I tried their options, it doesn't work ((((Maybe someone can tell me what I'm doing wrong. Here is the config

var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {

 context: __dirname + "/frontend",

 entry: {
  app: "./js/app",
  styles: "./css/app",

 },
 output: {
  path: __dirname + "/public/js",
  publicPath: '/',
  filename: "[name].js",
 },

 resolve:{
  modulesDirectories: ["node_modules"],
  extensions: ["", ".js", ".styl"]
 },

 resolveLoader:{
  modulesDirectories: ["node_modules"],
  extensions: ["", ".js", ".styl"],
  moduleTemplates: ["*-loader", "*"]
 },

 module: {
  loaders: [
  {
   test: /\.js$/,
   exclude: /(node_modules|bower_components)/,
   loader: 'babel?presets[]=es2015'
  },
  { test: /\.css$/, exclude: /\.useable\.css$/, loader: "style!css" },
  { test: /\.useable\.css$/, loader: "style/useable!css" },
  { test: /\.styl$/, loader: 'style!css!stylus!' },
  { test: /\.css$/, loader: "style!css?root=." },
  { test: /\.stly$/, loader: ExtractTextPlugin.extract("css!stylus!") }
  ]
 },
 plugins: [
  new ExtractTextPlugin("css/[name].css", {allChunks: true})
 ]
};

Now I created the simplest project, where there is only index.html and con.styl, it still creates style.js and that's it ((( It seems that ExtractTextPlugin does not work at all, but if you fix it through console.log, it shows that there is such a function { [ Function: ExtractTextPlugin] loader: [Function], extract: [Function] }. The config was cut, but still nothing changed (

var ExtractTextPlugin = require("extract-text-webpack-plugin");
console.log(ExtractTextPlugin);
module.exports = {

 entry: {
  styles: "./con.styl"

 },
 output: {
  path: __dirname + "/",
  publicPath: '/',
  filename: "[name].js",
 },

 module: {
  loaders: [
  {
   test: /\.js$/,
   exclude: /(node_modules|bower_components)/,
   loader: 'babel?presets[]=es2015'
  },
  { test: /\.styl$/, loader: 'style!css!stylus!' },
  { test: /\.stly$/, loader: ExtractTextPlugin.extract("css!stylus!") }
 ]
 },
 plugins: [
  new ExtractTextPlugin("[name].css", {allChunks: true})
 ]
};

Here are plugins and low holes that are connected

{
"name": "test",
"version": "1.0.0",
"main": "index.js",
"directories": {
"test": "test"
},
"dependencies": {},
"devDependencies": {
"babel-core": "^6.10.4",
"babel-loader": "^6.2.4",
"babel-plugin-transform-es2015-modules-commonjs": "^6.10.3",
"babel-preset-es2015": "^6.9.0",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"style-loader": "^0.13.1",
"stylus": "^0.54.5",
"stylus-loader": "^2.1.1",
"webpack": "^1.13.1"
},
"scripts": {
"dev": "webpack --watch --progress --inline"
},
"author": "Serega",
"license": "ISC",
"description": ""
}

Answer 1

Remove { test: /\.styl$/, loader: 'style!css!stylus!' } from config.
And fix
{ test: /\.stly$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!stylus-loader") }