使用React-widgets，引入less文件遇到问题

#1

使用react组件库react-widgets，依赖如下：

"dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-widgets": "^3.4.5"
  },
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "^2.0.0-rc.3",
    "file-loader": "^0.10.0",
    "html-webpack-plugin": "^2.28.0",
    "less": "^2.7.2",
    "less-loader": "^2.2.3",
    "postcss-loader": "^1.2.2",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.3.0"
  }

webpack.config.js如下：

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const webpack = require('webpack')

module.exports = {
  entry: {
    index: './src/index.js'
  },
  output: {
    path: resolve(__dirname, 'views'),
    filename: '[name].js',
    chunkFilename: '[id].js?[chunkhash]',
  },
  module: {
    rules: [
      { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader'}, 
      { 
        test: /\.css$/, use: ExtractTextPlugin.extract({
          fallback: 'style-loader', use: 'css-loader',
        })
      }, 
      { 
        test: /\.less&/, use: ExtractTextPlugin.extract({
          fallback: 'style-loader', use: ['css-loader', 'less-loader']
        })
      }, 
      { test: /\.gif$/, use: 'url-loader?mimetype=image/png' }, 
      { test: /\.woff(2)?(\?v=[0-9].[0-9].[0-9])?$/, use: 'url-loader?mimetype=application/font-woff' }, 
      { test: /\.(eot|ttf|svg)(\?v=[0-9].[0-9].[0-9])?$/,  use: 'file-loader?name=[name].[ext]' }
    ]
  },
  plugins: [
    new ExtractTextPlugin({ filename: '[name].css?[contenthash:8]'}),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
    })
  ]
}

按照react-widgets Getting Started里的例子写了入口文件

import React from 'react'
import { render } from 'react-dom'
import 'react-widgets/lib/less/react-widgets.less'
import { DropdownList } from 'react-widgets'

var colors = ['orange', 'red', 'blue', 'purple'];

render(, document.getElementById('root'));

运行命令webpack-dev-server出现错误提示

./~/react-widgets/lib/less/react-widgets.less
Module parse failed: E:\ProjectSpace\WebstormProjects\react-widgets-demo\node_modules\react-widgets\lib\less\react-widgets.less Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @import "./variables.less";
| @import "./bootstrap-theme.less";
| 
 @ ./src/index.js 9:0-52
 @ multi ./~/.2.3.0@webpack-dev-server/client?http://localhost:8080 ./src/index.js

请教怎么解决