SB not load Angular material styles when the project is library

[krbaio3]

Describe the bug
When the defaultProject is a Angular Library, the styles from angular material, not working

To Reproduce
I create an application with this command: ng new design-system --create-application=false --prefix=css --style=scss --minimal
I create a library. I want to develop my components within: ng generate library components --prefix=cs
I add angular material to the library: ng add @angular/material
I add my slider component to my library
I add storybook to the workspace: npx -p @storybook/cli sb init --type angular
Code the story and run it: npm run storybook

Not Working...
I create an application type project: ng generate application demo --minimal
Add angular material to demo project
I use the slider component

it works!
The surprise,... if I change the defaultProject from design-system (library) to demo (application),... works!

The example repository: https://github.com/krbaio3/bug-sb-ko.git

I understand it is a bug, because, if I want to have only one library with Storybook, I have to add an application project and change the default project to run SB?

Thx!

[ronaldohoch]

Can you please update the repository? I'm with the same issue.

[krbaio3]

@ronaldohoch I have updated the repository. I forgot to push.

[ronaldohoch]

Thank you.
I could make my project works!

[joniruokamo]

I am also using my Angular 12 project as a library and styles are not working. The only way I am able to get the styles into the storybook is to add them as global styles to angular.json, but this is not a viable solution as global styles are not permitted in angular.json for a library project. How did you get yours work @ronaldohoch?

[ronaldohoch]

I don't think i remember exactly, but i think is that line commented in preview.js, check below:
This is my .storybook/main.js

module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
    "../projects/ui/src/lib/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/preset-scss",
    '@storybook/addon-controls',
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    'storybook-dark-mode'
  ]
}

This is my .storybook/preview.js

import { setCompodocJson } from "@storybook/addon-docs/angular";
import { themes } from '@storybook/theming';
import docJson from "../documentation.json";
setCompodocJson(docJson);
//This line is from my custom theme from material design, so, just put this line with your theme
import "../projects/ui/src/lib/web/styles/blue-theme.scss";

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  docs: { inlineStories: true },
  darkMode: {
    // Override the default dark theme
    dark: { ...themes.dark, appBg: 'black' },
    // Override the default light theme
    light: { ...themes.normal }
  },
  options: {
    storySort: {
      order: ['Intro'],
    },
  },
}

[Marklb]

While this is not exactly the same as #15246, I think it is essentially caused by the same problem.

If you don't want to change your default project from your library to an application, you have two other options currently.

1. You can provide the name of the project you want Storybook to get config from by setting an environment variable STORYBOOK_ANGULAR_PROJECT to the project name.
2. (This is my preferred choice) You can define a project named "storybook" and that will take higher precedence than the defaultProject option.

[ThibaudAV]

You have a new third options :p

• start storybook with angular builder and ng command https://gist.github.com/ThibaudAV/b5a9f993b01c3d3bbdf01c0fd8f3c73f
  in your case you cant taget your demo project with "browserTarget": "demo:build",

[sunnykantkr]

May be little late. I just observed that for "@storybook/angular": "^6.5.12" adding material theme style url in angular json is working when the project is angular library.