Extract text webpack plugin not working?

Question

webpack

The extract text webpack plugin css file collector does not work. I reviewed all the screencasts, googled, only one thing, how to connect it, and everything works right away. I have a stylus preprocessor, loaders were installed, all js files are collected, and the styles themselves are written to the style tag. But I can't seem to put the styles in a separate css file. I registered everything, I repeat, the assembly takes place in js, but I need it in css. The config is

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


  context: __dirname + "/frontend",

  entry: {
    app: "./js/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("style", "css!stylus!") }
    ]
  },
  plugins: [
    new ExtractTextPlugin("[name].css")
  ]
};

Answer 1

You have 2 rules applied to the same files:

{ test: /\.styl$/, loader: 'style!css!stylus!' },
{ test: /\.stly$/, loader: ExtractTextPlugin.extract("style", "css!stylus!") }

Remove the first one and remove the exclamation point at the end of the secondcss!stylus!