写自己的UI库时遇到的问题1. 在examples/main.js中引用index.less文件，运行npm run d

1. 在examples/main.js中引用index.less文件，运行npm run dev时报错如下：

复制粘贴如下：

 ERROR  Failed to compile with 1 errors                                                                   22:27:33

 error  in ./examples/theme/default/index.less

Module build failed: 

// load the styles
var content = require("!!../../../node_modules/_css-loader@0.28.11@css-loader/index.js??ref--11-1!../../../node_modules/_postcss-loader@2.1.6@postcss-loader/lib/index.js??ref--11-2!../../../node_modules/_less-loader@4.1.0@less-loader/dist/cjs.js??ref--11-3!./index.less");
          ^
Unrecognised input
      in /Users/liwenzhi/worksapce/yonyou/agla-fe-components-8.50/examples/theme/default/index.less (line 4, column 12)

 @ ./examples/theme/default/index.less 2:12-480
 @ ./examples/main.js
 @ multi ./node_modules/_webpack-dev-server@2.9.7@webpack-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./examples/main.js

可是查看main.js中的代码路径并没有引用错误：

import './theme/default/index.less';

于是google之后发现，很多在做项目或自己的UI库时都会遇到这个问题，是因为用vue-cli 2.0构建项目时在webpack.base.conf.js中配置了一遍less-loader，然后又在build/utils.js中又配置了一遍，导致less-loader的配置重复了。

解决方法

webpack.base.conf.js中把 less-loader的配置删除

//将下面代码删除或注释掉
{
  test: /\.less$/,
  loaders: ['style-loader', 'css-loader', 'less-loader'],
},

个性build/utils.js中的less: 把

less: generateLoaders('less'),

修改为：

less: generateLoaders('less', { javascriptEnabled: true }),

问题得以解决。

参考链接：github.com/webpack-con…