add less config

Author: Plortinus

meta.js

@@ -14,6 +14,10 @@ module.exports = {
     'author': {
       'type': 'string',
       'message': 'Author'
+    },
+    'less': {
+      'type': 'confirm',
+      'message': 'Use Less to write css ?'
     }
   },
   'completeMessage': 'To get started:\n\n  {{^inPlace}}cd {{destDirName}}\n  {{/inPlace}}npm install\n  npm run dev\n\nDocumentation can be found at https://github.com/Plortinus/vue-multiple-pages'

template/package.json

@@ -28,6 +28,10 @@
     "glob": "^7.1.1",
     "html-loader": "^0.4.5",
     "html-webpack-plugin": "^2.28.0",
+    {{#less}}
+    "less": "^2.7.2",
+    "less-loader": "^4.0.3",
+    {{/less}}
     "postcss-loader": "^1.3.3",
     "style-loader": "^0.16.1",
     "url-loader": "^0.5.8",

template/webpack.config.js

@@ -6,6 +6,18 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin')
 
+const extractCSS = new ExtractTextPlugin({
+  filename: 'assets/css/[name].css',
+  allChunks: true
+})
+
+{{#less}}
+const extractLESS = new ExtractTextPlugin({
+  filename: 'assets/css/[name].css',
+  allChunks: true
+})
+{{/less}}
+
 const entries = {}
 const chunks = []
 glob.sync('./src/pages/**/app.js').forEach(path => {
@@ -40,6 +52,12 @@ const config = {
               use: 'css-loader',
               fallback: 'style-loader'
             }),
+            {{#less}}
+            less: ExtractTextPlugin.extract({
+              use: ['css-loader', 'postcss-loader', 'less-loader'],
+              fallback: 'style-loader'
+            }),
+            {{/less}}
             postcss: ExtractTextPlugin.extract({
               use: ['css-loader', 'postcss-loader'],
               fallback: 'style-loader'
@@ -59,6 +77,15 @@ const config = {
           fallback: 'style-loader'
         })
       },
+      {{#less}}
+      {
+        test: /\.less$/,
+        use: ExtractTextPlugin.extract({
+          use: ['css-loader', 'postcss-loader', 'less-loader'],
+          fallback: 'style-loader'
+        })
+      },
+      {{/less}}
       {
         test: /\.html$/,
         use: [{
@@ -88,10 +115,10 @@ const config = {
       chunks: chunks,
       minChunks: chunks.length
     }),
-    new ExtractTextPlugin({
-      filename: 'assets/css/[name].css',
-      allChunks: true
-    })
+    {{#less}}
+    extractLESS,
+    {{/less}}
+    extractCSS
   ],
   devServer: {
     host: '127.0.0.1',