I am trying to integrate RSuite with storybook. I'm using Storybook V7. The problem is the Rsuite theme and classnames are not being applied. I have tried using decorators, add webpack configs, yet I still can't resolve this issue.
This is my preview.ts
file
import React from 'react';
import '../src/assets/less/style.less';
import { CustomProvider } from 'rsuite';
import type { Preview, StoryFn } from '@storybook/react';
const preview: Preview = {
parameters: {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/
}
}
},
decorators: [
(Story: StoryFn) => (
<CustomProvider theme="light">
<Story />
</CustomProvider>
)
]
};
export default preview;
This is my main.ts
file:
const path = require('path');
import type { StorybookConfig } from '@storybook/react-webpack5';
const config: StorybookConfig = {
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/preset-create-react-app',
'@storybook/addon-interactions'
],
framework: {
name: '@storybook/react-webpack5',
options: {}
},
docs: {
autodocs: 'tag'
},
staticDirs: ['../public'],
core: {
builder: {
name: '@storybook/builder-webpack5',
options: {
fsCache: true,
lazyCompilation: true
}
}
},
webpackFinal: async (config) => {
config?.module?.rules?.push({
test: /.*\.(?:le|c)ss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true
}
},
{
loader: 'less-loader',
options: {
lessOptions: {
javascriptEnabled: true
}
}
}
]
});
return config;
}
};
export default config;
RSuite uses Less pre-processor. The styles are not being applied in to my stories.