Skip to content
This repository was archived by the owner on Aug 7, 2021. It is now read-only.

Support for LESS CSS #967

Open
DimitarTachev opened this issue Jul 5, 2019 · 1 comment
Open

Support for LESS CSS #967

DimitarTachev opened this issue Jul 5, 2019 · 1 comment
Labels

Comments

@DimitarTachev
Copy link
Contributor

DimitarTachev commented Jul 5, 2019

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"
  ]
},
  1. Add the less extention in the resolve section:
    extensions: [".js", ".scss", ".less", ".css"],
  2. Add the less extension in the nativescript-dev-webpack/style-hot-loader regex:
    test: /\.(css|scss|less)$/,
@NeevorPL
Copy link

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

3 participants