vue-cli构建项目使用 less的方法

npm install less less-loader --save-dev 

module: {
  rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
 }, 

// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
 var output = []
 var loaders = exports.cssLoaders(options)
 for (var extension in loaders) {
  var loader = loaders[extension]
  output.push({
   test: new RegExp('\\.' + extension + '$'),
   use: loader
  })
 }
 return output
} 

<template>
 <div class="hello">
  <h2>{{msg}}</h2>
  <h2>Essential Links</h2>
  <ul>
   <li>Core Docs</li>
  </ul>
  <h2>Ecosystem</h2>
 </div>
</template>

<script>
export default {
 name: 'hello',
 data: function () {
  return {
   msg: "Welcome to your vue.js app"
  }
 }

}
</script>

<style scoped lang="less">
 .hello {
  color: red;
  font-size: 0.45rem;
  h2 {
   color: blue;
  }
 }
</style>