vue 项目中使用less
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 项目中使用less相关的知识,希望对你有一定的参考价值。
参考技术A less 参考: https://less.bootcss.com/sass 参考: https://sass.bootcss.com/
说明参考: https://www.jianshu.com/p/6a35a548c9e1
如果在vue脚手架搭建的项目中需要使用less,建议初始化时勾选less配置,自行安装
映射(Maps)
与less变量类似,它类似js里面从对象中获取属性的值
语法 :.或者#映射类() 属性名:属性值; 属性名:属性值;
命名空间和访问符,和混合(Mixins)类似,这里是复用子类下的样式给其他类
示例:result类复用了上方的 content1 类的样式
如果还不满足于项目的开发,可研究一下less进阶知识, https://less.bootcss.com/features/
vue项目中使用less或者sass的方法
半年木有更新博客了。。。
前段时间一直在学习vue,开始记录一下遇到的问题吧
这篇文章主要是总结一下vue中使用less或者sass的方法,以less为例(style.less)
主要是两种
1.对于写在vue文件中的less:
所有vue文件的<style lang="less"></style>,会被vue-loader处理编译到一个css文件中,最终自动通过link标签写入index.html(在vue-loader.conf.js中配置)
<style scoped lang="less"> .notFoundPage { background-color: #0a8acd; color: #fff; position: relative; h1 { font-weight: 500; } } </style>
<link href="/static/css/app.21d3ff57a1596ef90908ba816fbb9496.css" rel="stylesheet">
2.对于外部less文件:
一是在mian.js中import style.less
此时webpack会把style.less和各个vue文件的less部分一起编译到同一个css文件,并在index.html的link中自动引入
二是在webpack的入口文件entry中加上style.less,编译完的出口文件会被自动注入到index.html文件中
entry: { app: ‘./src/main.js‘, style: ‘./src/style/style.less‘ },
<script type="text/javascript" src="/static/js/style.c67fefaf3f60c5ca074a.js"></script>
注意:
在vue2.x的webpack.base.conf.js:
{ test: /\.vue$/, loader: ‘vue-loader‘, options: vueLoaderConfig },
这段是针对.vue文件的处理规则,其中vueLoaderConfig是vue-cli自己定义的加载器,专门处理css样式
vueLoaderConfig引用的utils.js:
return { css: generateLoaders(), postcss: generateLoaders(), less: generateLoaders(‘less‘), sass: generateLoaders(‘sass‘, { indentedSyntax: true }), scss: generateLoaders(‘sass‘), stylus: generateLoaders(‘stylus‘), styl: generateLoaders(‘stylus‘) }
所以不需要再在rules里写.css .less 的处理规则了。
以上是关于vue 项目中使用less的主要内容,如果未能解决你的问题,请参考以下文章