Vue2.0 中使用Less
第一步 npm安装less
npm install less less-loader --save
第二步 修改webpack.base.conf.js文件,配置loader加载依赖,让其支持外部的less,在原来的代码上添加如下代码
{ test: /\.less$/, loader: "style-loader!css-loader!less-loader", },
第三步 在组件中的style 添加lang="less"
类似下列代码
<style lang="less"> .header{ width: 750px; height: 400px; .header-title{ position: fixed; width: 750px; height: 94px; line-height: 94px; vertical-align: middle; z-index: 20; h1{ width: 622px; font-size: 34px; display: inline-block; vertical-align: middle; } .header-back{ display: inline-block; width: 17px; height: 30px; background: url(images/header-back.png) no-repeat; background-size: 100%; text-align: left; vertical-align: middle; } .header-talk{ display: inline-block; width: 47px; height: 39px; background: url(images/header-talk.png) no-repeat; background-size: 100%; text-align: left; vertical-align: middle; } } .header-banner{ width: 750px; height: 400px; background: url(images/lby20180530-banner01.jpg) no-repeat; background-size: 100%; } } </style>
引入外部less文件则在style标签之后引入 @import './index.less',如下列代码
<style lang="less"> @import './index.less'; //引入全局less文件 </style>