最近用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即可正常运行

Logo

前往低代码交流专区

更多推荐