How to run storybook with a Vue component library that is internally using .less files?

Viewed 20

I'm trying to use Nitrozen-vue CSS component library (which is internally using .less for styling) in my storybook project (using Vue2)

I'm able to render the components on the storybook. However, for some reason, the styling isn't being applied.

I have added loaders inside my .storybook/main.js file like this:

[Webpack4]

const path = require("path");

module.exports = {
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.less$/,
      use: [require.resolve("vue-style-loader"), require.resolve("css-loader"), require.resolve("less-loader")],
    });
    return config;
  },
};

When I run storybook using

npm run storybook

it opens with a continuous loader on screen like this

enter image description here

How to run storybook with a Vue component library that is internally using .less files?

0 Answers
Related