Improve LESS loading in Storybook (#5406)

GitOrigin-RevId: ad128b8be645ed54de498b543f655751a6a0799b

services/web/.storybook/main.js

@@ -1,4 +1,5 @@
 const path = require('path')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
 // NOTE: must be set before webpack config is imported
 process.env.SHARELATEX_CONFIG = path.resolve(
@@ -22,8 +23,7 @@ module.exports = {
       ...storybookConfig.module.rules.filter(
         rule => !rule.test.toString().includes('woff')
       ),
-      // Replace the less rule, adding to-string-loader
-      // Filter out the MiniCSS extraction, which conflicts with the built-in CSS loader
+      // Replace the LESS rule, and the CSS rule which conflicts with the built-in CSS loader
       ...customConfig.module.rules.filter(
         rule =>
           !rule.test.toString().includes('less') &&
@@ -31,7 +31,7 @@ module.exports = {
       ),
       {
         test: /\.less$/,
-        use: ['to-string-loader', 'css-loader', 'less-loader'],
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'],
       },
     ]
 

services/web/.storybook/preview.js

@@ -65,7 +65,9 @@ export const loaders = [
       // NOTE: this uses `${theme}style.less` rather than `${theme}.less`
       // so that webpack only bundles files ending with "style.less"
       activeStyle: await import(
-        `../frontend/stylesheets/${theme === 'default-' ? '' : theme}style.less`
+        `!!to-string-loader!css-loader!less-loader!../frontend/stylesheets/${
+          theme === 'default-' ? '' : theme
+        }style.less`
       ),
     }
   },