Support for `LESS CSS`

[DimitarTachev]

Is your feature request related to a problem? Please describe. If you try to use app.less instead of app.css, you will get You may need an appropriate loader to handle this file type. webpack compilation error.

Describe the solution you'd like We have to provide less loader by default (or by an additional plugin).

Workaround 1) npm i less --save-dev 2) npm i less-loader --save-dev 3) Register the loader in your webpack.config:

{
  test: /\.less$/,
  use: [
    { loader: "css-loader", options: { url: false } },
    less-loader"
  ]
},

4) Add the less extention in the resolve section: extensions: [".js", ".scss", ".less", ".css"], 5) Add the less extension in the nativescript-dev-webpack/style-hot-loader regex: test: /\.(css|scss|less)$/,

[NeevorPL]

I made some changes but cannot push it to repository.

IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- package.json    (date 1567007649000)
+++ package.json    (date 1567157684000)
@@ -54,6 +54,7 @@
     "fork-ts-checker-webpack-plugin": "1.3.0",
     "global-modules-path": "2.0.0",
     "loader-utils": "^1.2.3",
+    "less-loader": "~5.0.0",
     "minimatch": "3.0.4",
     "nativescript-hook": "0.2.4",
     "nativescript-worker-loader": "~0.9.0",
Index: templates/webpack.angular.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- templates/webpack.angular.js    (date 1567007649000)
+++ templates/webpack.angular.js    (date 1567157684000)
@@ -131,7 +131,7 @@
             hashSalt
         },
         resolve: {
-            extensions: [".ts", ".js", ".scss", ".css"],
+            extensions: [".ts", ".js", ".scss", ".less", ".css"],
             // Resolve {N} system modules from tns-core-modules
             modules: [
                 resolve(__dirname, "node_modules/tns-core-modules"),
@@ -228,6 +228,15 @@
                         { loader: "css-loader", options: { url: false } }
                     ]
                 },
+                {
+                    test: /[\/|\\]app\.less$/,
+                    use: [
+                        "nativescript-dev-webpack/style-hot-loader",
+                        { loader: "css-loader", options: { url: false } },
+                        "less-loader"
+                    ]
+                },
+
                 {
                     test: /[\/|\\]app\.scss$/,
                     use: [
Index: templates/webpack.javascript.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- templates/webpack.javascript.js (date 1567007649000)
+++ templates/webpack.javascript.js (date 1567157684000)
@@ -92,7 +92,7 @@
             hashSalt
         },
         resolve: {
-            extensions: [".js", ".scss", ".css"],
+            extensions: [".js", ".scss", ".less", ".css"],
             // Resolve {N} system modules from tns-core-modules
             modules: [
                 resolve(__dirname, "node_modules/tns-core-modules"),
@@ -193,6 +193,14 @@
                     use: { loader: "css-loader", options: { url: false } }
                 },

+                {
+                    test: /\.less$/,
+                    use: [
+                        { loader: "css-loader", options: { url: false } },
+                        "less-loader"
+                    ]
+                },
+
                 {
                     test: /\.scss$/,
                     use: [
Index: templates/webpack.typescript.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- templates/webpack.typescript.js (date 1567007649000)
+++ templates/webpack.typescript.js (date 1567157684000)
@@ -95,7 +95,7 @@
             hashSalt
         },
         resolve: {
-            extensions: [".ts", ".js", ".scss", ".css"],
+            extensions: [".ts", ".js", ".scss", ".less", ".css"],
             // Resolve {N} system modules from tns-core-modules
             modules: [
                 resolve(__dirname, "node_modules/tns-core-modules"),
@@ -196,6 +196,14 @@
                     use: { loader: "css-loader", options: { url: false } }
                 },

+                {
+                  test: /\.less$/,
+                  use: [
+                    {loader: "css-loader", options: {url: false}},
+                    "less-loader",
+                  ],
+                },
+
                 {
                     test: /\.scss$/,
                     use: [
Index: templates/webpack.vue.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- templates/webpack.vue.js    (date 1567007649000)
+++ templates/webpack.vue.js    (date 1567157684000)
@@ -99,7 +99,7 @@
             hashSalt
         },
         resolve: {
-            extensions: [".vue", ".ts", ".js", ".scss", ".css"],
+            extensions: [".vue", ".ts", ".js", ".scss", ".less", ".css"],
             // Resolve {N} system modules from tns-core-modules
             modules: [
                 resolve(__dirname, "node_modules/tns-core-modules"),
@@ -196,9 +196,18 @@
                     'nativescript-dev-webpack/style-hot-loader',
                     'nativescript-dev-webpack/apply-css-loader.js',
                     { loader: "css-loader", options: { url: false } },
+                ],
+            },
+              {
+                test: /\.less$/,
+                use: [
+                  'nativescript-dev-webpack/style-hot-loader',
+                  'nativescript-dev-webpack/apply-css-loader.js',
+                  {loader: "css-loader", options: {url: false}},
+                  "less-loader",
                 ],
-            },
-            {
+              },
+              {
                 test: /\.scss$/,
                 use: [
                     'nativescript-dev-webpack/style-hot-loader',

Please include this patch in upcoming release or give me an access to repository.