Toolkit: support less loader (#21527)

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"

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;