如何在Vuespa中使用less

1.首先在node中安装less的库和依赖：

npm install less less-loader --save //将less和less-loader安装到开发依赖

2.在vue文件中的webpack.conf.js（有的是webpack.base.conf.js）中添加对less的引用：

module: {
    rules: [
    //以上省略其他的加载引用
      {
        test: /.less$/,
        loader: 'less-loader',
        loader: "style-loader!css-loader!less-loader",
      },
    ]
  },

3.新建less文件，在.vue中引用就可以了：

<style type="text/less" lang="less" scoped>
@import '../utils/less/index.less'; //自己less文件的路径
</style>

4.如果想要使用内嵌式的样式的话在style中修改一下就行了，如下：

<style lang="less" scoped>
</style>

5.有些人在使用4的时候可能会出现less的定义未被识别的问题可以试试修改成一下的样式:

<style type="text/less" lang="less" scoped>
</style>