成都网站建设设计

将想法与焦点和您一起共享

vuejs怎么使用less

小编给大家分享一下vuejs怎么使用less,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:网站建设、网站制作、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的青白江网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

方法:1、安装less依赖;2、修改“webpack.config.js”文件,配置loader加载依赖,让其支持less;3、在需要的页面中添加“”语句即可。

本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。

vuejs配置使用less

第一步:安装less依赖,

npm install less less-loader --save

第二步:

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

{

  test: /\.less$/,

  loader: "style-loader!css-loader!less-loader",

},

现在基本上已经安装完成了

第三步:使用less

在使用的时候在style标签里加上lang=”less”里面就可以写less的代码了

style标签里加上 scoped 为只在此作用域 有效



或者@import './index.less'; //引入全局less文件

以上是“vuejs怎么使用less”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


当前文章:vuejs怎么使用less
分享URL:http://chengdu.cdxwcx.cn/article/gheghh.html