在Vue中使用第三方的loader解释less语法

Posted mmit

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在Vue中使用第三方的loader解释less语法相关的知识,希望对你有一定的参考价值。

在vue中,如果直接使用less语法写样式的话,行不通

技术图片

 

 

 解决办法:

1.ctrl+c,终止批处理操作

技术图片

 

 2.输入命令: npm i less-loader -D

这时会有一些警告

技术图片

 

 (注意:当使用npm安装模块的时候,如果只写包的名字,就表示安装最新的版本

npm i jquery -S    安装的就是最新版本jquery3.4.0

如果要指定安装某一个版本的包(低版本),那么就需要在这个包的名字后面跟@加上版本号

npm i jquery@1.12 -S 此时安装的就是jquery1.12版本)

而警告里面出现的require提示我们需要安装包依赖项

技术图片

 

 输入命令:

技术图片

 

 

3.在webpack中配置对less的处理

技术图片

 

最后运行前需要注意,将css文件的后缀都改为.less 

对于sass也是一样的,对应的是sass-loader。

以上是关于在Vue中使用第三方的loader解释less语法的主要内容,如果未能解决你的问题,请参考以下文章

visual studio 2019不能在vue文件中直接识别less语法

Vue.js、Visual Studio 2015 和 .less 样式语法高亮

less学习:基础语法总结

vue 项目中使用less

vue中使用less

VUE学习笔记:17.模块化开发之webpack打包less文件