From 1a9bf915426cd7a6121591233b46f48695e71ddd Mon Sep 17 00:00:00 2001
From: Roman Misyurin <lunaticusgreen@users.noreply.github.com>
Date: Thu, 16 Jan 2020 03:24:13 +0300
Subject: [PATCH] Toolkit: support less loader (#21527)

---
 packages/grafana-toolkit/package.json          |  4 +++-
 .../src/config/webpack/loaders.ts              | 18 +++++++++++++++++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-toolkit/package.json b/packages/grafana-toolkit/package.json
index b568958fe2d..053b0e4dfac 100644
--- a/packages/grafana-toolkit/package.json
+++ b/packages/grafana-toolkit/package.json
@@ -95,7 +95,9 @@
     "tslint-config-prettier": "^1.18.0",
     "typescript": "3.7.2",
     "url-loader": "^2.0.1",
-    "webpack": "4.35.0"
+    "webpack": "4.35.0",
+    "less": "^3.10.3",
+    "less-loader": "^5.0.0"
   },
   "_moduleAliases": {
     "puppeteer": "node_modules/puppeteer-core"
diff --git a/packages/grafana-toolkit/src/config/webpack/loaders.ts b/packages/grafana-toolkit/src/config/webpack/loaders.ts
index 85c030edac6..188ab5b751c 100644
--- a/packages/grafana-toolkit/src/config/webpack/loaders.ts
+++ b/packages/grafana-toolkit/src/config/webpack/loaders.ts
@@ -4,7 +4,7 @@ import { getPluginId } from '../utils/getPluginId';
 
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
-const supportedExtensions = ['css', 'scss'];
+const supportedExtensions = ['css', 'scss', 'less'];
 
 const getStylesheetPaths = (root: string = process.cwd()) => {
   return [`${root}/src/styles/light`, `${root}/src/styles/dark`];
@@ -114,6 +114,22 @@ export const getStyleLoaders = () => {
       use: ['style-loader', ...cssLoaders, 'sass-loader'],
       exclude: [`${styleDir}light.scss`, `${styleDir}dark.scss`],
     },
+    {
+      test: /\.less$/,
+      use: [
+        {
+          loader: 'style-loader',
+        },
+        ...cssLoaders,
+        {
+          loader: 'less-loader',
+          options: {
+            javascriptEnabled: true,
+          },
+        },
+      ],
+      exclude: [`${styleDir}light.less`, `${styleDir}dark.less`],
+    },
   ];
 
   return rules;