DEV Community

Saulo Dias
Saulo Dias

Posted on

Adding Global CSS to an Angular Library Storybook

#storybook #css #angular #bootstrap

This tutorial assumes you have configured an Angular Library + Storybook following this post.

Most of the time, when creating components, you'll probably want to rely on some global css style. That enables you to use generic classes (like bootstrap classes), or theming and so on. However the Storybook documentation lacks examples on how to do it.

For this example we first have to install Bootstrap. Go to your workspace root folder and run npm install bootstrap.

Once you have done that, now you can link the boostrap css to your Storybook project.

To do so, you just have to add the css path to the styles in your angular.json file, in the styles list of your storybook project like in the following example.

"styles": ["node_modules/bootstrap/dist/css/bootstrap.min.css"],
Enter fullscreen mode Exit fullscreen mode

See the entire file and example workspace on Github.

I have edited the default MyLibComponent from the Angular Library basic example and it looks like this with the Bootstrap styling.
image

You might also want to check this out:

saulodias

Angular Library + Storybook

Saulo Dias ・ Sep 19 '21

#angular #component #library #storybook

Top comments (1)

Collapse
 
roblevintennis profile image
Rob Levin •

Thanks man, love it when fellow devs have little tips like this when I need it :-)

Hey, so I set up my project with nx and it's a library, so my angular.json edit was pretty much what you say but I had to add the entire section:

"storybook": {
...
  "architect": {
    "build": {
      "options": {
        "styles": ["libs/ag/styles/common.min.css"]
      }
    }
  },
...
},
Enter fullscreen mode Exit fullscreen mode

Maybe it'll help someone

Read next

imranshaik012 profile image

Different ways to create Objects in Javascipt

Imran Shaik -

yashjain99 profile image

Build collapsible sidebars using just CSS

Yash Jain -

ibn_abubakre profile image

Hiding Elements in CSS: The Accessible Way

Abdulqudus Abubakre -

endykaufman profile image

Creating a user interface for the Webhook module using Angular

ILshat Khamitov -