Webpack less-loader 编译不成功

#1

错误提示:

ERROR in ./node_modules/autoprefixer-loader!./node_modules/less-loader/dist/cjs.js!./src/static/manage.less
    Module parse failed: Unexpected character '#' (1:0)
    You may need an appropriate loader to handle this file type.
    | #header {
    |   color: #6c94be;
    | }

报的错误说 未知的# , 可是怎么看都是正确的!
并且我直接使用 npm 的 lessc 执行是好用的如下:

lessc manage.less manage.css  

我的目的是需要webpack能够自动编译less文件并打包

@import '~iview/src/styles/index.less';

// Here are the variables to cover, such as:
@primary-color: #8c0776;

//less文件直接这样写就报这个错误。     文档的换行格式 fileformat=unix  

    ERROR in ./node_modules/autoprefixer-loader!./node_modules/less-loader/dist/cjs.js!./src/static/index.less
    Module parse failed: Unexpected token (1:0)
    You may need an appropriate loader to handle this file type.
    | .ivu-load-loop {
    |   animation: ani-load-loop 1s linear infinite;
    | }

我的文件
js 文件:

import 'iview/dist/styles/iview.css';
import './static/manage.less';
//import './static/manage.css';  //用css可以成功打包


console.log('manage ....');

less:

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
  color: @light-blue;
}

用的 iview 的脚手架生成的
webpack config:

            {
                test: /\.less/,
                use: ExtractTextPlugin.extract({
                    use: [ 'autoprefixer-loader' , 'less-loader'],
                    fallback: 'style-loader'
                })
            },

package.json


  "devDependencies": {
    "less": "^3.0.4",
    "less-loader": "^4.1.0",