New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Bug]: unable to render global styles for my storybook app #26301
Comments
Some additional context: |
exactly same.. |
Can someone from storybook team check this please? @shilman. Sorry for tagging individually, but wasn't sure whom to reach out to and if this could be prioritized?
|
Do you a have a reproduction repo you can share? If not, can you create one? Go to https://storybook.new or see repro docs. Thank you! 🙏 |
@shilman https://github.com/truedrug/storybook-global-styles-repro
|
@shilman any updates here pls? |
Hi @truedrug, I figured it out. The issue is that non-css-module CSS, of course, has some "side-effects". So, CSS, which isn't coupled or used by any component, but should be used globally instead. The problem is that, per default, the CSS in your Please adjust your import type { StorybookConfig } from "@storybook/react-webpack5";
const config: StorybookConfig = {
stories: ["../src/**/*.stories.tsx", "../src/**/*.mdx"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
"@storybook/addon-viewport",
{
name: "@storybook/addon-styling-webpack",
options: {
rules: [
{
test: /\.module\.css$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
modules: {
localIdentName: `${"prefix"}__[local]--[hash:base64:5]`,
},
},
},
{
loader: "postcss-loader",
options: { implementation: require.resolve("postcss") },
},
],
},
{
test: /\.css$/,
exclude: /\.module\.css$/,
+ sideEffects: true,
use: [
"style-loader",
"css-loader",
{
loader: "postcss-loader",
options: { implementation: require.resolve("postcss") },
},
],
},
{
test: /\.module\.less$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
modules: {
localIdentName: `${"prefix"}__[local]--[hash:base64:5]`,
},
},
},
{
loader: "postcss-loader",
options: { implementation: require.resolve("postcss") },
},
{
loader: "less-loader",
options: {
lessOptions: {
javascriptEnabled: true,
math: "always",
},
},
},
],
},
{
test: /\.less$/,
exclude: /\.module\.less$/,
use: [
"style-loader",
"css-loader",
{
loader: "postcss-loader",
options: { implementation: require.resolve("postcss") },
},
{
loader: "less-loader",
options: {
lessOptions: {
javascriptEnabled: true,
math: "always",
},
},
},
],
},
],
},
},
],
framework: {
name: "@storybook/react-webpack5",
options: {},
},
docs: {
autodocs: true,
},
};
export default config; This will mark all non-CSS-module CSS files having |
Describe the bug
Unable to get the global styles working
main.ts
preview.ts
global.css
To Reproduce
No response
System
No response
Additional context
Should apply the background to red, but it does not even show up in chrome styles tab
The text was updated successfully, but these errors were encountered: