add less less-loader

Author: renl

package.json

@@ -11,7 +11,10 @@
     "@vue/compiler-sfc": "^3.0.0-beta.2",
     "css-loader": "^3.4.2",
     "file-loader": "^6.0.0",
+    "less": "^3.12.2",
+    "less-loader": "^7.0.0",
     "mini-css-extract-plugin": "^0.9.0",
+    "style-loader": "^1.2.1",
     "url-loader": "^4.0.0",
     "vue-loader": "^16.0.0-alpha.3",
     "webpack": "^4.42.1",

src/App.vue

@@ -61,9 +61,12 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="less" scoped>
 .root {
   text-align: center;
+  button{
+    box-shadow: 0 0 3px #000;
+  }
 }
 img {
   width: 200px;

webpack.config.js

@@ -41,6 +41,10 @@ module.exports = (env = {}) => ({
           },
           'css-loader'
         ]
+      },
+      {
+        test: /\.less$/,
+        loader: 'style-loader!css-loader!less-loader'
       }
     ]
   },