-
-
Notifications
You must be signed in to change notification settings - Fork 9.3k
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
Reopened bug. Angular 13. Global styles no longer work in SB 6.4 (CSS or SCSS) #16950
Comments
It does have a workaround as described in the original bug but the issue is still present |
Any news when this will be fixed ? I upgraded my project to v13 and now the global styles are not working. |
Just use a workaround described in the original issue. That's what I am currently doing |
@8thblock @jon9090 I added some MIGRATION documentation in #16980. I'm not an Angular person, so I'm not sure all the terminology is correct, but please take a look. From my conversation with @ThibaudAV, my understanding is that we don't plan to fix the original issue in #16802 Specifically:
|
Thank you for clarifying! |
This is still an issue for me. Global styles and CSS variables are not being picked up at all, nor are any styles pulled from node modules |
For anyone still experiencing this issue, a hacky workaround seems to be manually appending whatever global styles you need in the preview.js:
For context, this is the preview.js inside an nx monorepo library. I have tried with (no luck) to add styles to the project's styles array in angular.json, but nothing is ever loaded. This is holding back our upgrade to v.13 so would be useful if there was a fix/better workaround for loading global styles. |
Thx @joewIST. Only this way works of me as well. |
Also, fwiw, the migration guide approach isn't working for my "storybook": {
"builder": "@nrwl/storybook:storybook",
"options": {
"uiFramework": "@storybook/angular",
"port": 4400,
"config": {
"configFolder": "libs/ag/.storybook"
},
"styles": [
"libs/ag/styles/common.properties.min.css",
"libs/ag/styles/common.resets.min.css",
"libs/ag/styles/common.utilities.min.css"
],
"projectBuildConfig": "ag:build-storybook"
},
"configurations": {
"ci": {
"quiet": true
}
}
}, I tried the preview hack and the import GlobalStyles from '!style-loader!css-loader!../libs/ag/styles/common.min.css';
const storybookStyles = document.createElement('style');
storybookStyles.innerHTML = GlobalStyles;
// document.body.appendChild(storybookStyles);
setTimeout(() => {
// obviously screwy but was just flailing trying to figure stuff out
document.body.appendChild(storybookStyles);
}, 5000) So it doesn't seem like the Migration guide approach is working for
Perhaps it's something to do with UPDATE: I got it working! For others maybe you'll run in to this and it'll help In you're
For me these styles didn't show up until I put them in the "storybook": {
"builder": "@nrwl/storybook:storybook",
"options": {
"uiFramework": "@storybook/angular",
"port": 4400,
"config": {
"configFolder": "libs/ag/.storybook"
},
/* PUTTING IT HERE DID NOT WORK FOR ME */
"projectBuildConfig": "ag:build-storybook"
},
"configurations": {
"ci": {
"quiet": true
}
}
},
"build-storybook": {
"builder": "@nrwl/storybook:build",
"outputs": ["{options.outputPath}"],
"options": {
"uiFramework": "@storybook/angular",
"outputPath": "dist/storybook/ag",
"config": {
"configFolder": "libs/ag/.storybook"
},
"styles": [
"libs/ag/styles/common.properties.min.css",
"libs/ag/styles/common.resets.min.css",
"libs/ag/styles/common.utilities.min.css"
],
"projectBuildConfig": "ag:build-storybook"
},
"configurations": {
"ci": {
"quiet": true
}
}
} |
I can confirm that the solution of @roblevintennis in the |
Hi there @roblevintennis ! |
Yeah that's what got things working for me (and it looks like others). Nothing else wrong that I can think of at the moment (on my phone away from my machine) but perhaps you can document it in an aside note in the upgrade to 13 nx docs. Might help for folks upgrading angular via nx. |
Did someone get this to work with css + tailwind? I tried all the proposed solutions here but nothing worked. |
@Markus-Ende I did these steps:
@tailwind base;
@tailwind components;
@tailwind utilities;
// `@apply` doesn't seem to work with custom theme classes
// See also https://tailwindcss.com/docs/functions-and-directives#theme
// and
// https://tailwindcss.com/docs/functions-and-directives#layer
@layer utilities {
.tw-grid-rows-12 {
grid-template-rows: theme('gridRowStart.12');
}
}
Let me know if need a working example. |
@joewIST what does your storybook.scss look like? This works. It ends up loading the style tag into the iframe. But I just see
Im guessing we need to build tailwind first? |
Yup that worked. @joewIST solution worked perfectly for us. @Markus-Ende if you are like us, and want to be able to use tailwind classes on you library components, but not import the tailwind css into the build (letting the consuming applications provide the tailwind css), @joewIST solution works. Its important to note though, that you have to build tailwind and import the output css. Importing a "imports" css with the tailwind imports will not work. Preview.js gets run at runtime, not build time, so once in the browser it has no idea what to do with @import syntax. Ill try to lay out what we have going on below for anyone else who stumbles upon this. .storybook directory inside the library directory
We added a target in project.json as well:
So you'd run... and your good to go! @mandarini Any thoughts on building this into the generator or building it into a preset? Its not terrible to implement, but would be nice to be able to get it out of the box. Tailwind + Angular + Storybook is very common |
Hi @sir-captainmorgan21 ! I am very happy you solved your issue and it works now! Also, thanks for the suggestion! I have not worked much with Tailwind, unfortunately, to be able to provide my take on this, or if that would be something worth adding in the generator. I'll try to sync with the team to get a better opinion on this! :) Thank you for trying to improve Nx! :D :D by the way, I suppose this article here does not help in any way, since it does not include Storybook, right? |
@mandarini absolutely. Glad I could help! But correct, that article doesn't help much since it doesn't use storybook. |
@mandarini I think something is not working correctly. It was working in 12 tho Here is the repo: https://github.com/maxisam/nx-storybook-demo Basically I have a shared-style project, shared-component library project and an app. Storybook can't build on either app or shared-component library.
I have the setting like in app in library Not sure this is a NX issue or Storybook issue, but I am sure it was working at one point with NX v12 |
@mandarini never mind. I have figured out. For anyone having the same issue in the future. Checkout the branch I created in my demo repo To run the whole storybook, I use a wrapper app to run all stories from each library https://github.com/maxisam/nx-storybook-demo/tree/sb-app-global-style To run the individual library. https://github.com/maxisam/nx-storybook-demo/tree/sb-lib-global-style I don't think we need to include styles in the build-storybook config anymore as @roblevintennis comments. |
Original bug is not resolved
#16802
NOTE: for those who landed here please refer to the original issue for a workaround. It does work
Attaching updated project to reproduce the issue.
Describe the bug
To Reproduce
Attaching a minimal reproduction generated myself as npx sb@next repro fails.
styles_issue_repro 2.zip
Just run the below to see the reproduction of the issue
Expected result
Global styles should apply, i.e.
System
macOS Monterey
OS Version 12.0.1
npm 6.14.15
node v14.18.1
Additional context
n/a
The text was updated successfully, but these errors were encountered: