「后端小伙伴来学前端了」Vue中为什么直接安装less-loader会报版本过高错误?你有没有思考过?
清晨的☀
前言
我们都知道在 Vue 中并不只有纯正的CSS
,还有less
、sass
等,后面这些,写起来都可以级联着,不需要像原生的css
那样,会方便很多。
大家都知道我也是最近写的vue,看见周围人都在用这个,我也就去安装了一下,但是一直都报一个版本过高的错误。这种错误非常好解决,因为后端也常遇到,直接降版本就好了。
因为好奇心的驱使,我就在想,为什么不能安装最新less-loader?好像也没有哪里体现啊
然后就产生了这篇文章…
一、踩坑开始
我目前项目是没有安装的,我们先把<style lang="less">
改成less
,这个时候控制台就会报这样的错误。
这很简单,说让我们下载less-loader
,下载就是拉吗
npm i less-loader
这样就直接下载完, 我们再次启动项目。
接着报如下错误:
拿着这个去百度,答案到处都是,但是基本没人去讲为什么我们安装了默认的less-loader
会报这个错误。
二、原因
首先我们要明白一件事情,vue的脚手架是依靠着webpack
的,我们默认是使用webpacke
来对vue
项目进行打包管理的。
目前webpack
的最新版本已经到五拉。
而我们使用的vue
的脚手架目前使用的webpack
版本还是4.
多的
我们可以去哪里查看呢?打开node_modules
,找到webpack
文件夹,看package.json
文件,查看内置的版本信息
在这个里面是可以直接看到它搭配的less和less-loader
的。
我们可以直接下载这个搭配的版本使用,后面的版本号,
其实less-loader
版本从4~7都行,现在最新的都到10拉,只不过新的8,9,10都是搭配webpack5
使用的。
npm install less@3.9.0 less-loader@4.0.3
再次启动项目,没有任何问题。
对了在这个地方不要产生一个误解,说一定要使用什么最新的才是最好的,而是要根据实际版本来选择最合适的,才是最好的。
后语
大家一起加油!!!如若文章中有不足之处,请大家及时指出,在此郑重感谢。
纸上得来终觉浅,绝知此事要躬行。
大家好,我是博主宁在春
:主页 一名喜欢文艺却踏上编程这条道路的小青年。 希望:我们,待别日相见时,都已有所成
。
相关文章
- Vue专题 05_详解vue生命周期的每个节点
- cnpm i安装报错-Install fail! Error: Unsupported URL Type: npm:vue-loader@^15.9.7
- vue-router 2.0 常用基础知识点之router.push()[通俗易懂]
- Vue-基础核心(一)
- vue-cli 初始----安装运行Vue项目
- 你知道import Vue from 'vue' 吗?
- 20 多个好用的 Vue 组件库
- 在网页文档中引入Vue.js的方法有哪些?_vue直接引入js文件没有用
- vue 调用子组件方法失败_Vue子组件调用父组件的方法及常见问题「建议收藏」
- vue3 报错解决:找不到模块‘xxx.vue’或其相应的类型声明。(Vue 3 can not find module)
- Vue(renren-fast_vue_master)项目目录结构[通俗易懂]
- Vue项目:菜农管理 【maven + spring boot + RESTFul + SSM+vue + axios】
- vue模版语法
- (十二)使用 Vue Devtools
- 4. 「vue@2.6.11 源码分析」new Vue() 整体流程和组件渲染之前的准备工作
- vue-cli 是怎么配置babel的?
- IDEA安装Vue插件后为什么创建.vue文件不显示vue图标
- Vue.js数据管理神器Vuex搭配MySQL数据库,打造高效实用的Web应用(vuexmysql)
- Vue 实现前后端分离,安全连接 MSSQL 数据库(vue 连接mssql)
- Vue技术实现访问远程Redis的精彩之旅(vue访问远端redis)
- Vue框架搭建在Redis之上的Web应用(vue请求redis)
- Vue抢跑Redis速度感受实时重磅数据(vue获取redis)
- Vue实时监测Redis变化(vue监控redis变化)
- Vue如何利用Redis加速应用程序性能(vue如何使用redis)
- 从零开始Vue项目中使用Redis(vue使用redis)
- Oracle与Vue官网联合宣传前瞻技术,轻松开发(oracle vue官网)