Vue.js项目引入less文件报错解决

最近用vue-cli+webpack构建项目时，当在app.vue或者其他组件中中引入less文件时会报错，如下所示：

import '@/less/detail.less'

报错如下：

根据报错信息说是相关依赖babel-loader和vue-loader没有找到，但是我们npm i babel-loader vue-loader依然报错此信息。
正常情况下在webpack的配置文件中已经配置好可以引入css，less等文件，如果出现报错我们可以有两种方式解决。

1.src形式引入文件

<!-- 记住此时须严格按照文件相对路径 --><style lang="less" src="./less/comm.less"></style>

2.利用cnpm安装包

需要局部安装vue-style-loader，less-loader，css-loader，vue-loader和less包（需注意就算全局安装以上包仍需局部安装），即：cnpm i vue-style-loader less-loader css-loader vue-loader less

---

npm run dev即可正常运行