Open tommaton opened 3 years ago
Do you have a repro repo you can share?
I'll try and get one sorted ASAP
@shilman this is a reproduction of the repo of which I'm able to replicate https://github.com/tommaton/storybook-postcss-issue
Any workarounds for this?
@DylanCulfogienis there's been some updates on how Storybook and PostCss work together. And a new addon was recently released. See if it helps in your case, otherwise if you could create a reproduction so that it can be better looked at it would help us immensely.
Sounds good?
Stay safe
To add you still need to use a pre-release version of SB to make it work @jonniebigodes ... Thanks for the tip off on that btw :)
+1 to this issue. I'm also running into the same problem when trying to use css modules with postcss 8. module files are ignored completely, and if I try to change the @storybook/addon-postcss or webpack final rules (well out of my comfort zone) to get it to work, I get errors which are super unhelpful.
I've created a minimum repro using nextjs boilerplate and postcss
https://github.com/danspratling/postcss-modules-re
Note that I'm using postcss-8 and storybook alpha
Note that the two pages are different on the dev server but appear the same in storybook because the module styling isn't in place
I've tried every solution I can find on the web attempting to force storybook/webpack config to work with modules but none succeed.
To ask the obvious, I assume you are importing the CSS into storybook? Looks like not.
+1 to this issue. I'm also running into the same problem when trying to use css modules with postcss 8. module files are ignored completely, and if I try to change the @storybook/addon-postcss or webpack final rules (well out of my comfort zone) to get it to work, I get errors which are super unhelpful.
I've created a minimum repro using nextjs boilerplate and postcss
https://github.com/danspratling/postcss-modules-re
Note that I'm using postcss-8 and storybook alpha
Note that the two pages are different on the dev server but appear the same in storybook because the module styling isn't in place
I've tried every solution I can find on the web attempting to force storybook/webpack config to work with modules but none succeed.
I am in my main project - I didn't add it here because a global stylesheet shouldn't be required for modules to work, as modules go directly into the JS component (and therefore should be available to storybook that way too)
Just for argument's sake, I tried adding global.css
into preview.js
but that didn't change anything
To ask the obvious, I assume you are importing the CSS into storybook? Looks like not.
+1 to this issue. I'm also running into the same problem when trying to use css modules with postcss 8. module files are ignored completely, and if I try to change the @storybook/addon-postcss or webpack final rules (well out of my comfort zone) to get it to work, I get errors which are super unhelpful. I've created a minimum repro using nextjs boilerplate and postcss https://github.com/danspratling/postcss-modules-re Note that I'm using postcss-8 and storybook alpha Note that the two pages are different on the dev server but appear the same in storybook because the module styling isn't in place I've tried every solution I can find on the web attempting to force storybook/webpack config to work with modules but none succeed.
I am in my main project - I didn't add it here because a global stylesheet shouldn't be required for modules to work, as modules go directly into the JS component (and therefore should be available to storybook that way too)
Just for argument's sake, I tried adding
global.css
intopreview.js
but that didn't change anythingTo ask the obvious, I assume you are importing the CSS into storybook? Looks like not.
+1 to this issue. I'm also running into the same problem when trying to use css modules with postcss 8. module files are ignored completely, and if I try to change the @storybook/addon-postcss or webpack final rules (well out of my comfort zone) to get it to work, I get errors which are super unhelpful. I've created a minimum repro using nextjs boilerplate and postcss https://github.com/danspratling/postcss-modules-re Note that I'm using postcss-8 and storybook alpha Note that the two pages are different on the dev server but appear the same in storybook because the module styling isn't in place I've tried every solution I can find on the web attempting to force storybook/webpack config to work with modules but none succeed.
of course =)
I have the same issue.. It works when I'm in dev mode, but it doesn't in production build...
Describe the bug Every time I run storybook none of the styles/classes are not getting applied to the components. The component stories are generated ok just with no styles.
But when I add the components into an app it all works fine.
To Reproduce Running the command
start-storybook -c .storybook -p 6006
from the rootExpected behavior Styles to be applied to the components in storybook
Code snippets Button.component.tsx
Button.module.css
.storybook/main.js
System Environment Info:
System: OS: macOS 10.15.7 CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz Binaries: Node: 12.18.3 - ~/.nvm/versions/node/v12.18.3/bin/node Yarn: 1.22.5 - ~/.yvm/shim/yarn npm: 6.14.6 - ~/.nvm/versions/node/v12.18.3/bin/npm Browsers: Chrome: 87.0.4280.67 Edge: 87.0.664.52 Firefox: 81.0 Safari: 14.0.1 npmPackages: @storybook/addon-a11y: ^6.1.9 => 6.1.9 @storybook/addon-essentials: ^6.1.9 => 6.1.9 @storybook/addon-info: ^5.3.21 => 5.3.21 @storybook/addon-viewport: ^6.1.9 => 6.1.9 @storybook/addons: ^6.1.9 => 6.1.9 @storybook/preset-typescript: ^3.0.0 => 3.0.0 @storybook/react: ^6.1.9 => 6.1.9 @storybook/theming: ^6.1.9 => 6.1.9
Additional context Add any other context about the problem here.