less快速入门

文档适用vue2 

安装less,我这里是指定版本安装的

npm install --save-dev less-loader@4.1.0

1.变量的定义与使用

1.1.单页面定义

 

 1.2.全局定义与使用

安装

npm install sass-resources-loader --save-dev

在build/utils.js中添加如下代码 

resources: path.resolve(__dirname, '../src/assets/css/common.less')这里的common.less是我定义的全局less

    // less: generateLoaders('less'),
    less: generateLoaders('less').concat({
      loader: 'sass-resources-loader',
      options: {
        resources: path.resolve(__dirname, '../src/assets/css/common.less')     // var.less为新建的全局变量的文件
      }
    }),

定义的全局less 

 

 在指定的页面直接引用即可

<style scoped lang='less'>

转载一篇优秀的文章，里面介绍了详细的less语法变量适用，不过对我来说不常用，上面的比较常用。如何使用less(变量,混合,匹配,运算,嵌套...) - 枫起叶落 - 博客园