Importing global styles into an Angular component is not working [or documentation is outdated] #14549
Comments
ThibaudAV
added
angular
nx
|
I'll see if I can find a solution I can't promise anything 😅 but a first thing seems to me not "normal" , maybe : This error means that storybook does not find angular config in the angular.json (if you use a workpase nx a conversion to angular.json is made) |
|
Hi @ThibaudAV Here's the Angular.json entry for the Nx storybook project I am trying to get to work. I have not modified this code after it was generated and architect.build is present: |
|
|
|
Hi @ThibaudAV This library is just one of a 1000+ in our mono repo. We don't have a default project. Nx does not set one nor is it needed. |
|
hum ok, On this part Storybook is not (yet) very flexible and is looking for a project with the following rules: storybook/app/angular/src/server/angular-cli_config.ts Lines 90 to 99 in ba332ae So, if you can add one of the following cases with an that you want it should work 🤞 |
|
Hi @ThibaudAV What is the result of this: process.env.STORYBOOK_ANGULAR_PROJECT? We have multiple applications using different global stylesheets. Ideally, Storybook can leverage what the Angular team has done in ng-package.json and support styleIncludePaths. |
|
no storybook does not read the it's a part that doesn't work very well, I think, I'm trying to improve it so that storybook can work in multi application easily Another way to add different global styles for each app is to use the |
|
with this maybe it works : 🤷♂️ but i'm not a webpack expert. i don't know if there is a better way to do it But I have the impression that it is incompatible if you resolve this error |
|
Hi @ThibaudAV Your above suggestion gives me a "path is not defined" so didn't continue down that road. Global styles work when I add a default project. Will just have to change the default project depending on which app I am working on at the moment. We are just starting to use StorybookJS so it won't get too much into advanced use cases like running Cypress with StorybookJS any time soon. Hope you don't mind. I will create a feature request ticket for what we discussed here. Thank you for your help and assistance. |
Greetings Team Storybook!
Describe the bug
I am using an Nx Workspace v12.x with Angular v11.2.9. According to your documentation located here:
https://storybook.js.org/docs/angular/get-started/setup
It says to include global styles in .storybook/preview.js
This is my preview.js for my specific component (Note; this is not my global preview.js)
My main.js looks like this:
The storybook starts but there is no global style added. Other documentation on the interwebz refers to have a main.js file that is configured something like this:
This also does not work and will make the storybook not even start with a big fat error.
I start up my Storybook like this:
nx run booking-engine-ui-booking-entry:storybook --https=true --ssl-key server.key --ssl-cert server.crtThe entire startup log can be found below:
I would love it it there I can see a sample Nx Angular mono repo with a Storybook using a global style. I have looked on the entire Interwebz all day today without luck.
There is a closed ticket in your repo that doesn't give me anything to go by here:
#6364
I found an outstanding question on Stack Exchange with the same question here:
https://stackoverflow.com/questions/62888353/angular9-nx-storybook-why-are-my-scss-styles-getting-ignored-in-storybook
Please help!!!
The text was updated successfully, but these errors were encountered: