vue cli安装使用less的教程详解
更新时间：2019年07月12日 09:37:12 作者：Jello
这篇文章主要介绍了vue-cli安装使用less的教程，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue-cli构建的项目默认是不支持less的，需要自己添加依赖
1.安装less和less-loader ，在项目目录下运行如下命令
npm install less less-loader --save-dev
2.安装成功后，打开build/webpack.base.conf.js ，在 module.exports = 的对象的module.rules 后面添加一段：
module.exports = {
// 此处省略无数行，已有的的其他的内容
module: {
rules: [
// 此处省略无数行，已有的的其他的规则
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
}
]
}
}
3.最后，在代码中的style标签中加上lang="less"属性即可
<style lang="less" scoped>
.index-wrap {
display: flex;
align-items: center;
justify-content: center;
span {
font-size: 0.373rem;
}
}
</style>
总结
以上所述是小编给大家介绍的vue cli安装使用less的教程详解 ,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关文章
本文主要介绍vscode中 vue项目es-lint的配置方法，非常不错，具有一定的参考借鉴价值，需要的的朋友参考下吧2018-07-07
本文主要给大家介绍如何vue实现图片拖拽及鼠标滚轮放大缩小,文中有详细的代码供大家参考,对我们的学习或工作有一定的帮助,需要的朋友可以参考下2023-08-08
Vue Element UI 中 el-table 树形数据
这篇文章主要介绍了Vue Element UI 中 el-table 树形数据 tree-props 多层级使用避坑指南,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
这篇文章主要介绍了Vue下的components模板的使用及应用，本文通过代码介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-11-11
这篇文章主要介绍了vue实现禁止浏览器记住密码功能的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
今天我们稍微说一下 vue3 项目中的 hooks 的使用，其实这个 hooks 呢是和 vue2 当中的 mixin 是类似的，学习过 vue2 的小伙伴一定对 mixin 一定比较熟悉，快跟随小编一起来学习学习吧2022-08-08
这篇文章主要介绍了vue头部导航动态点击处理方法,文中通过一段示例代码给大家介绍了vue实现动态头部的方法，需要的朋友可以参考下2018-11-11
本篇文章主要介绍了VUE利用vuex模拟实现新闻点赞功能实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
关于ElementUI el-table 鼠标滚动失灵的问题及解决办法
这篇文章主要介绍了关于ElementUI el-table 鼠标滚动失灵的问题及解决办法,本文给大家分享问题所在原因及解决方案,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了Vue keep-alive的实现原理分析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最新评论