78 lines
2.1 KiB
JavaScript
78 lines
2.1 KiB
JavaScript
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
|
|
const WEBPACK_SERVE = Boolean(process.env.WEBPACK_SERVE);
|
|
const mode = WEBPACK_SERVE ? 'development' : 'production';
|
|
export const isDev = mode === 'development';
|
|
|
|
/** @type { import('@storybook/html-webpack5').StorybookConfig } */
|
|
const config = {
|
|
stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)', '../apps/**/*.mdx', '../apps/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
|
|
|
|
addons: [
|
|
'@storybook/addon-webpack5-compiler-swc',
|
|
'@storybook/addon-links',
|
|
'@storybook/addon-essentials',
|
|
'@chromatic-com/storybook',
|
|
'@storybook/addon-interactions',
|
|
'@storybook/addon-mdx-gfm'
|
|
],
|
|
|
|
framework: {
|
|
name: '@storybook/html-webpack5',
|
|
options: {},
|
|
},
|
|
|
|
webpackFinal: async (config) => {
|
|
const newConfig = {
|
|
...config,
|
|
module: {
|
|
...config.module,
|
|
rules: [
|
|
...config.module.rules.filter((i) => {
|
|
if (i.test instanceof RegExp && i.test.test('.css')) {
|
|
return false;
|
|
}
|
|
return true;
|
|
}),
|
|
{
|
|
test: /\.css$/,
|
|
use: [
|
|
{
|
|
loader: !isDev ? MiniCssExtractPlugin.loader : 'style-loader',
|
|
},
|
|
{
|
|
loader: 'css-loader',
|
|
options: {
|
|
modules: false,
|
|
},
|
|
},
|
|
{
|
|
loader: 'postcss-loader',
|
|
options: {
|
|
postcssOptions: {
|
|
plugins: ['tailwindcss', 'autoprefixer'],
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
plugins: [
|
|
...config.plugins,
|
|
// ...(config.plugins ?? [])
|
|
// // DocgenPlugin adds to the build time and we don't use storybook's autogenerated docs.
|
|
// .filter((plugin) => plugin.constructor.name !== 'DocgenPlugin'),
|
|
// ,
|
|
new MiniCssExtractPlugin({
|
|
filename: '[name].bundle.css',
|
|
chunkFilename: '[id].css',
|
|
}),
|
|
],
|
|
};
|
|
return newConfig;
|
|
},
|
|
|
|
docs: {}
|
|
};
|
|
export default config;
|