diff --git a/examples/hippy-react-demo/scripts/hippy-webpack.dev.js b/examples/hippy-react-demo/scripts/hippy-webpack.dev.js
index 0fcb329d7b1..1c6af7fc885 100644
--- a/examples/hippy-react-demo/scripts/hippy-webpack.dev.js
+++ b/examples/hippy-react-demo/scripts/hippy-webpack.dev.js
@@ -5,6 +5,7 @@ const pkg               = require('../package.json');
 
 module.exports = {
   mode: 'development',
+  devtool: 'eval-source-map',
   watch: true,
   watchOptions: {
     aggregateTimeout: 1500,
diff --git a/examples/hippy-vue-demo/package.json b/examples/hippy-vue-demo/package.json
index 778569477d2..ad720deda2f 100644
--- a/examples/hippy-vue-demo/package.json
+++ b/examples/hippy-vue-demo/package.json
@@ -36,7 +36,10 @@
     "case-sensitive-paths-webpack-plugin": "^2.2.0",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
+    "less-loader": "^7.1.0",
+    "scope-loader": "^1.0.3",
     "unicode-loader": "^1.0.7",
+    "vue-loader": "^15.9.6",
     "vue-template-compiler": "^2.6.10",
     "webpack-cli": "^3.3.10"
   }
diff --git a/examples/hippy-vue-demo/scripts/hippy-webpack.dev.js b/examples/hippy-vue-demo/scripts/hippy-webpack.dev.js
index e8872fbaff2..f50bef6c8b8 100644
--- a/examples/hippy-vue-demo/scripts/hippy-webpack.dev.js
+++ b/examples/hippy-vue-demo/scripts/hippy-webpack.dev.js
@@ -17,6 +17,7 @@ if (fs.existsSync(hippyVueCssLoaderPath)) {
 
 module.exports = {
   mode: 'development',
+  devtool: 'eval-source-map',
   watch: true,
   watchOptions: {
     aggregateTimeout: 1500,
@@ -46,6 +47,7 @@ module.exports = {
         test: /\.vue$/,
         use: [
           'vue-loader',
+          'scope-loader',
           'unicode-loader',
         ],
       },
@@ -78,6 +80,13 @@ module.exports = {
           cssLoader,
         ],
       },
+      {
+        test: /\.less$/,
+        use: [
+          cssLoader,
+          'less-loader',
+        ],
+      },
       {
         test: /\.(png|jpg|gif)$/,
         use: [{