Storybook addons not working when running creevey
See original GitHub issueHi,
We have a functional Storybook with some standard addons for adding toolbar buttons and theme switching funtionality and a custom webpack config in order to support sass for storybook in my main.js
const path = require('path');
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials",
"storybook-addon-themes",
{
name: '@storybook/addon-docs',
options: {
configureJSX: true, // Needed for the mdx documentation files
babelOptions: {},
sourceLoaderOptions: null
},
},
"creevey"
],
webpackFinal: async (config, { configType }) => {
// `configType` 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: /\.*scss$/,
use: ['style-loader', 'css-loader', 'resolve-url-loader', 'sass-loader'],
include: path.resolve(__dirname, '../'),
});
// Return the altered config
return config;
}
}
When I run Creevey and refresh the page, my classes for theming applied on the body element seem gone and therefore the entire storybook has no styling anymore. Creevey takes snapshots of these unstyled elements for comparing but we can’t use these in production.
Here the example of a button with Creevey not running:
This is the result after starting Creevey and refreshing the page:
I also see this warning but i’m not sure if it is related:
It says unable to find main.js in a strange path construction and a few lines after that it adds the stories defined in main.js so it must be able to find it I think?
Do you have any idea what could be causing this?
Issue Analytics
- State:
- Created 3 years ago
- Comments:19
I managed to achieve the desired result by setting our own globals instead of using the themes addon. This now sets the classes correctly and by using your experimental gobals support we are now able to run the tests for different themes. Closing this issue now and will keep track of upcomming progress. Thank you.
@BmsVisionJo I’ve just released the new version with the fix. Please, take a look.