webpack 2 less loader throwing error

Question

I Have the following webpack.conf.js:
const webpack = require('webpack');

module.exports = {
  entry: {
    app: './src/app/index.module.ts',
  },
  output: {
    path: './dist',
    filename: "[name].bundle.js"
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: [
          'ts-loader'
        ]
      },
      {
        test: /\.css$/,
        use: [
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style!css!less'
        ]
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js', '.less', '.css', '.html']
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {warnings: false}
    })
  ]
};

And this my ts file import for the less file (my-cmp.ts):
import './my-cmp.less'

Here is the less file:

& {
  .bla {
    background: #0074D9;
  }
}

Here is the error that I am getting:

ERROR in ./src/app/common/components/bet-form/bet-view/bet-view.cmp.ts
Module not found: Error: Can't resolve 'style!css!less' in '...'
 @ ./src/app/common/components/my-cmp.ts 3:0-26
 @ ./src/app/index.module.ts

Here is my relevant part of package.json:

"css-loader": "^0.26.1",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"style-loader": "^0.13.1",

Answer 1

Copied from discussion as this solved the issue:

Try use: [ 'style-loader', 'css-loader', 'less-loader' ] instead. It should be a list of loaders, see docs. Syntax changed a bit from version 1 to 2.