Open TeoTN opened 3 years ago
For what it's worth, I had a similar problem until I found out my postcss.config.js
was conflicting. I removed postcss-modules
from the postcss.config.js
and ended up with this working Storybook config:
// .storybook/main.js
module.exports = {
...
addons: [
'@storybook/addon-docs',
'@storybook/addon-essentials',
{
name: '@storybook/addon-postcss',
options: {
styleLoaderOptions: {},
cssLoaderOptions: {
modules: true,
sourceMap: true,
importLoaders: 1,
},
postcssLoaderOptions: {
implementation: require('postcss')
},
},
}
],
...
}
Hi,
We have the same problem. We have seen that there is a pull request that fix this problem #30, but it was opened 2 July 2021 and has never merged.
This works well in my case too, i have built your branch and used https://www.npmjs.com/package/patch-package to start using it, but would be good to have this merged
I think you don't even need @storybook/addon-postcss
.
I had the same problem but I'm now using a workaround using the postcss-loader
in my main.js
https://github.com/nico-martin/nextjs-storybook-postcss/blob/main/.storybook/main.js#L16-L23
Describe the bug
I'm currently using both global CSSes and CSS modules, and can't replace my custom webpack config with this addon.
Another part of the issue is that current implementation of
addon-postcss
is adding another rule for CSS rather than replacing the default Storybook's one, if I'm correct?Steps to reproduce the behavior
The following config won't load CSS modules.
However, specifying two separate rules for webpack would work:
Expected behaviour
Ideally I'd like to see both rules configured when I pass
modules: true
to css config...Additional context
It might be related with #23 although I'm not sure if supporting modules should be treated as specifying another file extension...