解决vue中less的使用问题

 更新时间:2021年11月15日 17:13:25   作者:左手倒影ZY  
这篇文章主要介绍了解决vue中less的使用问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

1.安装less依赖:npm install less less-loader --save

2.修改webpack.base.config.js文件,配置loader加载依赖,让其支持外部的less,在原来的代码上添加

// 此种方法在控制台中标签样式显示的是style标签样式
{ 
    test: /\.less$/,

    loader: "style-loader!css-loader!less-loader",
  
   options: { sourceMap: true } //可以在控制台中看到当前标签样式来自于哪个less文件
}

3.在项目中使用

在vue文件中的style标签中添加lang="less"即可在标签中使用less,或者外部引入less

遇到的问题:

原因:less-loader安装的版本过高
解决方案:

1.npm uninstall less-loader2.npm install less-loader@5.0.0

或者直接在package.json文件中直接修改版本号 然后 npm install

到此这篇关于vue中less的使用的文章就介绍到这了,更多相关vue less使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 关于element中el-cascader的使用方式

    关于element中el-cascader的使用方式

    这篇文章主要介绍了关于element中el-cascader的使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • 详解Vue项目的打包方式(生成dist文件)

    详解Vue项目的打包方式(生成dist文件)

    本文主要介绍了详解Vue项目的打包方式(生成dist文件),文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • element ui中el-form-item的属性rules的用法示例小结

    element ui中el-form-item的属性rules的用法示例小结

    这篇文章主要介绍了element ui中el-form-item的属性rules的用法,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧
    2024-07-07
  • Vue.js中自定义Markdown插件实现References解析(推荐)

    Vue.js中自定义Markdown插件实现References解析(推荐)

    本文主要写的是,如何编写一个插件来解析<references>标签,并将其转换为HTML,这种方法可以应用于其他自定义标签和功能,为Vue.js应用程序中的Markdown渲染提供了极大的灵活性,感兴趣的朋友跟随小编一起看看吧
    2024-07-07
  • vue打包项目版本号自加的操作步骤

    vue打包项目版本号自加的操作步骤

    项目每次打包后都需要改动项目版本号,这个改动每次都需要在package.json中修改version,比较麻烦,到底有没有一种打包后版本号自加的办法,这篇文章主要介绍了vue打包项目版本号自加的步骤,需要的朋友可以参考下
    2022-09-09
  • 强烈推荐!Vue3.2中的setup语法糖

    强烈推荐!Vue3.2中的setup语法糖

    script setup是vue3的新语法糖,并不是新增的功能模块,只是简化了以往的组合式API必须返回(return)的写法,并且有更好的运行时性能,这篇文章主要给大家介绍了关于Vue3.2中setup语法糖的相关资料,需要的朋友可以参考下
    2021-12-12
  • vue封装TabBar组件的完整步骤记录

    vue封装TabBar组件的完整步骤记录

    组件封装是为了复用,换成大白话就是,同样的事情我不想做第二遍,节省出来的时间用来看动漫不香吗,下面这篇文章主要给大家介绍了关于vue封装TabBar组件的完整步骤,需要的朋友可以参考下
    2021-10-10
  • vue 进阶之实现父子组件间的传值

    vue 进阶之实现父子组件间的传值

    这篇文章主要介绍了vue 进阶之实现父子组件间的传值,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • vue3使用elementPlus进行table合并处理的示例详解

    vue3使用elementPlus进行table合并处理的示例详解

    虚拟数据中公司下有多个客户,公司一样的客户,公司列需要合并,客户如果一样也需要合并进行展示,所以本文给大家介绍了vue3使用elementPlus进行table合并处理的实例,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2024-02-02
  • 基于Vue实现视频打码功能

    基于Vue实现视频打码功能

    在当今数字化时代,视频内容的传播变得极为普遍,然而,出于隐私保护等需求,我们常常需要对视频中的人脸进行打码处理,所以本文将详细介绍如何使用 face-api.js 库来实现视频人脸打码的功能,需要的朋友可以参考下
    2025-04-04

最新评论