Using .less files with (Vue &) Storybook

The default Storybook setup for Vue (npx -p @storybook/cli sb init --type vue) works fine until you want to use some CSS preprocessor. Based on the sample on the storybook website (see https://storybook.js.org/docs/configurations/custom-webpack-config/)

Here is the snippet that makes it work. Add a file named webpack.config.js to the .storybook directory with the following content:

const path = require('path')

// Export a function. Accept the base config as the only param.
module.exports = async ({ config, mode }) => {
  // `mode` has a value of 'DEVELOPMENT' or 'PRODUCTION'
  // You can change the configuration based on that.
  // 'PRODUCTION' is used when building the static version of storybook.

  // Make whatever fine-grained changes you need
  config.module.rules.push({
    test: /\.less$/,
    use: ['style-loader', 'css-loader', 'less-loader'],
    include: path.resolve(__dirname, '../')
  })

  // Return the altered config
  return config
}