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的好代码教程详解 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

以上就是vue cli安装如何使用less的好代码教程详解。梦想的路上注定崎岖不定,坎坷萦绕,风雨万阻。而现实的路上注定疲倦不堪,身心伤痕累累,泪眼婆娑。更多关于vue cli安装如何使用less的好代码教程详解请关注haodaima.com其它相关文章!

您可能有感兴趣的文章
Vue路由参数的传递与获取方式详细介绍

vue学习记录之动态组件浅析

如何解决ElementUI组件中el-upload上传图片不显示问题

解读element el-upload上传的附件名称不显示 file-list赋值

一篇关于el-table-column的formatter的如何使用及说明