Add support for less variables and using a custom theme

web/.storybook/main.js

@@ -1,4 +1,7 @@
 module.exports = {
+  core: {
+    builder: 'webpack5',
+  },
   stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
@@ -7,5 +10,21 @@ module.exports = {
     '@storybook/preset-scss',
     '@storybook/addon-postcss',
   ],
+  webpackFinal: async (config, { configType }) => {
+    config.module.rules.push({
+      test: /\.less$/,
+      use: [
+        require.resolve('style-loader'),
+        require.resolve('css-loader'),
+        {
+          loader: require.resolve('less-loader'),
+          options: {
+            lessOptions: { javascriptEnabled: true },
+          },
+        },
+      ],
+    });
+    return config;
+  },
   framework: '@storybook/react',
 };