Using .less files with (Vue &) Storybook

author's avatar
Kees de Kooter
Oct 18 2019 14:31 • 1 min read

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

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
    test: /\.less$/,
    use: ['style-loader', 'css-loader', 'less-loader'],
    include: path.resolve(__dirname, '../')

  // Return the altered config
  return config