vue中使用less，以及在main.js使用全局less

首先，vue开发环境已经安装成功

一、如何使用less

1.安装less

npm install less less-loader --save

使用yarn

yarn add less
yarn add less-loader

2.修改build/webpack.base.config.js文件，配置loader加载模块

{
  test: /\.less$/,
  loader: 'style-loader!css-loader!less-loader'
},

3.vue文件中style标签里加上lang=”less” ，<style scoped lang="less">
4.引用less

@import './index.less'; //例如引入全局less文件

结束！

二、main.js中全局使用less

应用场景：在使用一些组件时，需要修改组件的样式
需要添加 !style-loader!css-loader!less-loader!

import '!style-loader!css-loader!less-loader!./styles/index.less';