在vue cli3.0 里面下载less,下载成功了还是提示没有 需要下载

      今天正好新建了一个项目,在用less的时候就各种花样报错提示我:

Failed to resolve loader: less-loader
You may need to install it.
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\hiberfil.sys'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\pagefile.sys'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\swapfile.sys'

Failed to resolve loader: less-loader
You may need to install it.

Error: Cannot find module 'less'

 解决办法:npm install less --save-dev

其他可能问题:

在 Vue CLI 3.0 中,如果你已经成功安装了 less,但仍然收到提示说需要下载,这可能是因为你的项目没有正确配置 less 或者其他相关依赖没有安装。

请按照以下步骤操作以确保 less 及其加载器正确安装和配置:

  1. 安装 less 和 less-loader

确保你已经安装了 less 和 less-loader。你可以通过运行以下命令来安装它们:

npm install less less-loader --save-dev
# 或者使用 yarn
yarn add less less-loader --dev
  1. 配置 webpack

Vue CLI 3.0 使用 webpack 作为其构建工具,但通常你不需要手动配置 webpack,因为 Vue CLI 会为你处理大部分配置。然而,如果你需要自定义 webpack 配置,你可以通过创建或修改 vue.config.js 文件来做到这点。

如果你需要确保 less-loader 被包含在 webpack 配置中,你可以在项目的根目录下创建 vue.config.js 文件(如果还没有的话),并添加如下配置:

module.exports = {
css: {
loaderOptions: {
less: {
// less-loader 配置项
// 例如,修改 JavaScript 启用选项和修改 less 变量
javascriptEnabled: true,
modifyVars: {
'primary-color': '#1DA57A',
'link-color': '#1DA57A',
'border-radius-base': '2px',
// ...
}
}
}
}
}
  1. 检查 package.json

确保 less 和 less-loader 已经出现在你的 package.json 文件的 devDependencies 部分。

  1. 重新启动开发服务器

在修改配置或安装新依赖后,你需要重新启动你的 Vue CLI 开发服务器来使这些更改生效。你可以通过运行以下命令来做到这一点:

 
 

bash复制代码

npm run serve
# 或者使用 yarn
yarn serve
  1. 检查错误消息

仔细阅读错误消息。有时,它可能会提供更多关于问题的上下文,比如它是否是一个关于其他依赖的问题(如 css-loader 或 style-loader),或者是否是一个配置问题。

  1. 清理缓存和重新安装依赖

如果上述步骤都没有解决问题,你可以尝试清理 npm 或 yarn 的缓存,并重新安装所有依赖:

 
 

bash复制代码

# 清理 npm 缓存
npm cache clean --force
# 或者清理 yarn 缓存
yarn cache clean
# 删除 node_modules 目录和 package-lock.json 或 yarn.lock 文件
rm -rf node_modules
rm package-lock.json # 或者 rm yarn.lock
# 重新安装依赖
npm install
# 或者使用 yarn
yarn install

完成这些步骤后,你的 Vue CLI 项目应该能够正确地处理 less 文件了。如果问题仍然存在,请仔细检查错误消息,并查看是否有其他配置或依赖需要调整。

欢迎关注微信公众号《农民工前端》,共同学习!!!

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
# URL: http://kongkong.fence.wmdev2.lsh123.com/ # jl-mis(接龙后台管理系统) 项目是基于vue-cli 3+ 构建的,请先将vue-cli升级到3+版本,vue-cli3 传送门(https://cli.vuejs.org/zh/)。 ## 技术栈 vue2 + vuex + vue-router + element-ui + webpack + ES6/7 + axios + less + flex + svg ### 项目图形化管理界面 ``` vue ui ``` ## 项目运行 #### 注意:由于涉及大量的 ES6/7 等新属性,node 需要 8.0 以上版本 ``` npm install npm run serve ``` ### 打包 ``` npm run build ``` ### 代码的 lint ``` npm run lint ``` # 项目布局 ``` . ├── public // HTML 和静态资源 │   ├── favicon.ico // 图标 │   ├── index.html // 入口html文件 ├── src // 源码目录 │   ├── assets // 静态资源 │   │   ├── images // 公共图片 │   ├── components // 组件 │   │   ├── common // 公共组件 │   │   ├── page // 页面 │   ├── libs // 封装库 │   │   ├── storage.js // 对cookie 和 localStorage 的封装 │   ├── plugins // 引用的插件 │   │   ├── axios.js // 对axios的的封装(拦截器相关) │   │   ├── element.js // 引入element-ui │   ├── router │   │   └── router.js // 路由配置 │   ├── service // 数据交互统一调配 │   │   ├── service.js // 获取数据的统一调配文件,对接口进行统一管理 │   ├── store // vuex的状态管理 │   │   ├── actions.js // 配置actions │   │   ├── getters.js // 配置getters │   │   ├── store.js // 引用vuex,创建store │   │   ├── modules // store模块 │   │   │   ├── urlGroups.js // 路由分组(权限相关) │   │   ├── mutation-types.js // 定义常量muations名 │   │   └── mutations.js // 配置mutations │   └── style // 样式字体相关 │   ├── fonts // 字体相关 │   ├── utility.less // 公共样式文件 │   ├── mixin.less // 样式配置文件 │   └── normalize.css // 样式重置 │   ├── App.vue // 页面入口文件 │   ├── main.js // 程序入口文件,加载各种公共组件 ├── vue.config.js // vue-cli 3+ 暴露出来的webpack相关的配置文件 . ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

奶糖 肥晨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值