How can I use CSS framework styles inside a storybook #25

croogie · 2016-04-02T23:24:05Z

Let's say that my application is basing on some CSS framework like Semantic UI, Bootstrap or something like that. How can I easily incorporate that styles inside a story book so that my components will display correctly?

arunoda · 2016-04-02T23:31:47Z

Yes it is. Read here - https://github.com/kadirahq/react-storybook/blob/master/docs/setting-up-for-css.md

I that's not what you need, just reopen this.

UPD 2017-08-17 (@hypnos)
https://storybook.js.org/configurations/add-custom-head-tags/

andrioid · 2016-10-19T11:20:32Z

Link is broken and I can't find it in the file in current master.

arunoda · 2016-10-19T12:09:38Z

Check this: https://getstorybook.io/docs/configurations/custom-webpack-config

UPD 2017-08-17 (@hypnos)
https://storybook.js.org/configurations/custom-webpack-config/

andrioid · 2016-10-19T13:16:48Z

Thanks. An easier way was to add a head.html file in the ".storybook" directory with the elements for Bootstrap or Semantic UI

UPD 2017-08-17 (@hypnos)
Now it's preview_head.html

wmhafiz · 2016-11-14T07:02:59Z

Thanks head.html method works perfectly!

felipecocco · 2016-12-10T02:34:57Z

Would head.html also be the best way to go about it if the file for you are adding is not served through a URL but is instead hosted locally? how would that work?

Rename ignore to exclude.

Add storybook to devDependencies.

Write a storybook for components in this addon #25

Add addonoptions repo

kirkstrobeck · 2017-05-17T01:43:55Z

Both links are broken.

ndelangen · 2017-05-17T10:23:33Z

Sorry for the broken links, this is unfortunately the result of our restructuring, The only way to find is by search.

What are you looking for / need help with @kirkstrobeck ? This issue is quite old and closed.
If you have a specific problem we can help you with, let us know 👍 .

sergiotapia · 2017-05-24T04:19:41Z

I landed here trying to figure out how to integrate React Storybook into a real application where all of our styles are in scss files in app/assets/stylesheets

ndelangen · 2017-05-24T08:25:47Z

You'll need to extend our webpack config / provide your own custom webpack config.

In it you'll need to tell webpack what to do with the .scss-files. aka, you need to add the sass-loader.

Likely you already have this already setup for you app, and you can mostly copy-paste from it's webpack config?

blairanderson · 2017-06-16T03:59:14Z

found in documentation: https://storybook.js.org/configurations/default-config/#css-support

adamchenwei · 2017-08-16T19:39:16Z

@arunoda would it possible remove above two links that have confused face I marked above? save time for others who enter this page in the future. Thanks!

kirkstrobeck · 2017-08-16T19:41:43Z

The confused reactions are probably enough. I upvoted em’ too.

Hypnosphi · 2017-08-17T10:54:11Z

Just updated the comments with outdated links

LukasMac · 2017-08-24T15:03:57Z

Header file for story book is called preview-head.html Reference:
https://storybook.js.org/configurations/add-custom-head-tags/

davidruisinger · 2017-11-14T08:59:02Z

Within my "main" app my global styles are defined within a JS file that exports a template string containing all the global CSS rules.
Is there a way to add a template string with CSS definitions to the iframe where the stories are rendered in?

EDIT:
Since I’m using react-styled-components I’m now just using their injectGlobal helper.

ndelangen · 2017-11-14T15:41:45Z

@flavordaaave I think you'll want to use just inject the styles in a style-tag from config.js

davidruisinger · 2017-11-14T22:04:32Z

@ndelangen So far all the possibilities of injecting global style (import './styles.css'; or via preview-head.html) don't allow me to inject styles with dynamic params.

My styles look something like this:

/* .storybook/config.js */

import theme from './theme'

export default `
html {
  font-family: Helvetica;
  background: ${theme.canvas_ground};
  ...
}
`

So for now I'm using the injectGlobal helper from react-styled-components as mentioned in my EDIT above.

/* .storybook/config.js */
...
import { injectGlobal } from 'styled-components'
import styles from '../src/styles'

injectGlobal`${styles}`
...

Hypnosphi · 2017-11-15T00:15:53Z

you can achieve a similar result with this:

// create a <style></style> DOM element
const styleElement = document.createElement('style')
// put the text from styles variable between opening and closing <style> tags
styleElement.appendChild(document.createTextNode(styles))
// place the style element inside <head>
document.head.appendChild(styleElement)

bradfrost · 2018-03-28T21:38:41Z

Hi there!
I'm trying to link up my stylesheet to Storybook, and am striking out.

I followed these instructions to import my CSS file (which lives in static/style.css in my project root) with this line: import '../static/style.css';. That resulted in an error with r

Error: Can't resolve '../i/link.svg' in [path]

I don't want to have to go through all this rigamarole to reconcile every externally-referenced resource in my stylesheet, so I thought I'd try a different way.

I added a preview-head.html per these docs, linking up my stylesheet like so:

<link rel="stylesheet" href="./static/style.css" />

This however results in a 404 error for the resource. I think it might just be a path issue, but can't seem to find which path I should be using relative to where Storybook is running. Any ideas?

nickytonline · 2018-03-28T22:02:24Z

If you're getting 404s because you're CSS is not on a CDN, you can pass an extra parameter to run Storybook with a static folder and reference your files as just ./some.css. Run storybook -p 9001 -s ./a-static-folder and put your css in that folder.

bradfrost · 2018-03-29T14:13:34Z

Thanks for the suggestion, @nickytonline. Unfortunately that didn't seem to work. I have my files in static/style.css and I ran the command storybook -p 9001 -s ./static. That resulted in storybook: command not found. I ran npm run storybook -p 9001 -s ./static which ran, but still resulted in a 404 error on my stylesheet.

nickytonline · 2018-03-29T15:12:02Z

@bradfrost, just for clarification, when you run npm run storybook -p 9001 -s ./static, ./static acts like / in storybook, so if your file is in static/styles.css in your project, your link would be <link rel="stylesheet" href="./styles.css" /> not <link rel="stylesheet" href="./static/styles.css" />

bradfrost · 2018-03-29T15:25:34Z

@nickytonline Yep, I had things linked up as <link rel="stylesheet" href="./styles.css" />.

nickytonline · 2018-04-03T01:48:59Z

@bradfrost this was bugging me that it was not working for you so I create a very basic repo using create-react-app and the storybook CLI. It shows an example of a static asset being used in storybook being referenced via a <link /> tag. It's available here, https://github.com/nickytonline/for-brad

You can see the stylesheet being referenced here, https://github.com/nickytonline/for-brad/blob/master/.storybook/preview-head.html#L1

bradfrost · 2018-04-08T19:09:20Z

@nickytonline Thanks very much for the demo project! I really appreciate it.

The issue I'm still running into is reflected in my original post, which is the use of import to get the styles into the project. That method unfortunately throws errors if assets like fonts or icons or background images don't resolve. I realize there are ways of remedying that, but I guess I'm just looking to link up a stylesheet in the head of my document the ol' fashioned way.

nickytonline · 2018-04-08T19:32:19Z

Sorry, my bad for not absorbing the entire content of your original post. That's quite the pickle if you want to avoid the rigamarole. Gonna have to think about that one a little bit.

amos80m · 2019-01-08T13:49:32Z

What you can do is to create a 'public' folder in the root folder.
in the 'public/semantic' folder pest the content of 'node_modules/semantic-ui-css'.
in package.json => scripts => storybook => add ''-s ./public"
last thing!!! in your component .less file do @import '/semantic/semantic.min.css';
now Icon should work smoothly.

jmarceli · 2019-05-06T08:59:55Z

For Storybook v5 and normalize.css "framework" it is enough to just add import "normalize.css"; inside .storybook/config.js file.

anton-paskanny · 2019-05-17T12:22:05Z

@jmarceli It works for me, thanks a lot!

snyderhaus · 2020-03-30T19:28:57Z

Is this still a viable option with v6?

For Storybook v5 and normalize.css "framework" it is enough to just add import "normalize.css"; inside .storybook/config.js file.

shilman · 2020-03-31T10:43:55Z

@snyderhaus yes, though since 5.3 config.js has been soft-deprecated and we strongly suggest using preview.js instead. more info:

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#to-mainjs-configuration

scottc11 · 2020-04-05T16:27:50Z

I have come to this thread numerous times for numerous projects! So this is for my own reference as well as anybody else.

This worked for me.

// storybook/config.js

import 'semantic-ui-css/semantic.min.css';
import 'bootstrap/dist/css/bootstrap.css';
import '!style-loader!css-loader!sass-loader!../client/scss/style.scss';

my style.scss is overriding the default bootstrap theme using sass variables

I was able to use storybooks default webpack config and just reference the style sheets like so, additionally using the inline loader syntax for my sass files, as shown in the docs.

"babel-core": "6.26.0",
"babel-loader": "7.1.4",
"@storybook/react": "^5.3.14",
"sass-loader": "^8.0.2",
"css-loader": "^3.4.2",
"style-loader": "0.20.3",
"react": "^16.3.2",

gkortsit · 2020-08-12T10:41:07Z

For anyone using v6+ the solution using config.js will not work.

I've managed to make it work like so:

create a file named preview.js in the .storybook folder
import the external css. In my case they were scss files so I've imported them like this:

// .storybook/preview.js

import '!style-loader!css-loader!sass-loader!@company/framework/src/styles.sass'
import '!style-loader!css-loader!sass-loader!./cssoverrides.sass'

The second import was added to override some default global styles.

My folder structure:

.storybook
│   cssoverrides.sass
│   main.js  
│   preview.js

Packages used:

"@storybook/react": "^6.0.0",
"react": "^16.13.1",
"@babel/core": "^7.11.1",
"@babel/preset-env": "^7.11.0",
"@babel/preset-react": "^7.10.4",
"sass-loader": "^9.0.3",
"css-loader": "^4.2.1",
"style-loader": "^1.2.1"

angelikipatrinou · 2020-08-24T14:20:34Z

What worked for me was to import bootstrap on ./storybook/preview.js

//I added this:
import 'bootstrap-4-grid/css/grid.min.css';

//this was already there
export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
};

https://storybook.js.org/docs/react/configure/styling-and-css#importing-css-files

ArianZargaran · 2021-01-08T18:01:56Z

In case you are injecting Bootstrap via CDN, a clean and easy solution is to populate Storybook Head Preview as mentioned in the docs: https://storybook.js.org/docs/react/configure/story-rendering#adding-to-head

This solution worked for me:

Create a new .storybook/preview-head.html file
Include any tag you may need in your Storybook iframe preview, HTML Head. In our case we are dropping Bootstraps CDN

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity_no="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Launch your Storybook (re-build) and DONE!

trickydisco78 · 2021-03-12T09:27:40Z

This was working when i was just importing global styles but now i've added a decorator to enable html preview the styles are no longer loaded

import { addDecorator } from '@storybook/html';
import { withHTMLDOC } from 'storybook-addon-html-document/html';

import '../src/css/styles.css';

addDecorator(withHTMLDOC);

mleister97 · 2021-04-22T10:07:05Z

Storybook v6.+ solution

Super simple for everyone facing issues with importing custom styles/fonts/sass/...

Create a file called preview.js
Import your global stylesheet e.g.

preview.js

import "./../src/styles/index.scss";

aboudard · 2021-05-11T08:08:32Z

Storybook v6.+ solution

Super simple for everyone facing issues with importing custom styles/fonts/sass/...

Create a file called preview.js
Import your global stylesheet e.g.

preview.js
import "./../src/styles/index.scss";

Totally works, I have my custom bootstrap scss added to any .mdx doc file that I write.

belloviniciusf · 2021-05-13T18:13:32Z

Storybook v6.+ solution

Super simple for everyone facing issues with importing custom styles/fonts/sass/...

Create a file called preview.js
Import your global stylesheet e.g.

preview.js
import "./../src/styles/index.scss";

Recently we updated to v6 and had issues specifically on storybook, it resolved these, thanks.

50l3r · 2021-09-03T10:32:48Z

Storybook v6.+ solution

Super simple for everyone facing issues with importing custom styles/fonts/sass/...

Create a file called preview.js
Import your global stylesheet e.g.

preview.js
import "./../src/styles/index.scss";

If i try to do this it load styles well but overwrite storybook styles like code:

@import "buefy/src/scss/buefy.css"

I try to encapsulate with scss like this:

style.scss

#root>#buefy {
	& {
		@import "buefy/src/scss/buefy.css";
	}
}

preview.scss

import './style.scss'
export const decorators = [
	(story) => {
		return {
			components: { story },
			template: '<div id="buefy"><story /></div>',
		}
	},
]

But it ocurrs on reverse. Buttons style seems to big.

drik98 · 2021-12-23T10:17:01Z

I am currently having the same problems as @50l3r. (Just that we are using bootstrap instead of buefy.)

It should not be possible to overwrite the styling of the code section, the imported css should only apply to everything inside the .docs-story container.

jdubs1994 · 2022-11-03T00:52:28Z

I am currently having the same problems as @50l3r. (Just that we are using bootstrap instead of buefy.)

It should not be possible to overwrite the styling of the code section, the imported css should only apply to everything inside the .docs-story container.

Did you ever figure out how to fix it?

shilman · 2022-11-03T01:12:31Z

@jdubs1994 you can run your stories in iframes using the docs.iframeStories = true parameter. however, this has performance implications

jdubs1994 · 2022-11-03T12:32:52Z

@jdubs1994 you can run your stories in iframes using the docs.iframeStories = true parameter. however, this has performance implications

import '../src/scss/global.scss'

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  docs: {
    iframeStories: true
  },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

Running into the same result, this is what my preview.js looks like. Everything looks good besides the code snippet section of the story.

kerryj89 · 2023-12-28T16:31:13Z

It seems importing css through preview.js or via <link> attribute in preview-head.html or preview-body.html all yield the same unexpected result when using MDX (maybe for other curated formats, too?). That is, it treats the entire MDX container as a preview area (and not just limited to the canvas iframe of the stories within it). Check out the devtools for your imported css and you will see that not only is it loading the imported css for each individual story, but also the entire MDX area which should arguably NOT be the case (I think this area should be safeguarded from custom css imports unless iframe mode is set to inline).

For those of us with iframe mode enabled, I think we should have another depth of configurability that imports directly into the story canvas iframes (if we don't already have that option - I couldn't find it).

For now, I have to create a decorator to conditionally import the css I want and ONLY inside the story iframes. It discerns whether the iframe it's in is a story or not and conditionally loads in a link element pointing to the css.

// preview.js

export const decorators = [
  (story) => {
    const script = `
      <script>
        (function() {
          // Conditionally load the stylesheet
          if (document.location.search.startsWith('?viewMode=story')) {
            var link = document.createElement('link');
            link.rel = 'stylesheet';
            link.type = 'text/css';
            link.href = '/build/icp.css';
            document.head.appendChild(link);
          }
        })();
      </script>
    `;

    return `${script}
            ${story()}`;
  },
];

arunoda closed this as completed Apr 2, 2016

ndelangen pushed a commit that referenced this issue Apr 5, 2017

Merge pull request #25 from kadirahq/ignore-stories

5673230

Rename ignore to exclude.

ndelangen pushed a commit that referenced this issue Apr 5, 2017

Merge pull request #25 from white-rabbit-japan/master

7b308bf

Add storybook to devDependencies.

ndelangen pushed a commit that referenced this issue Apr 11, 2017

Merge pull request #29 from kadirahq/fix-25

54a2678

Write a storybook for components in this addon #25

ndelangen added a commit that referenced this issue Apr 11, 2017

Merge pull request #25 from storybooks/add-addonoptions-repo

f51cb7b

Add addonoptions repo

mcmunder mentioned this issue Jun 22, 2017

Added pointer to global CSS docs to style testing #1333

Merged

ndelangen added compatibility with other tools question / support labels Aug 18, 2017

ggdaltoso mentioned this issue Jul 1, 2018

Update storybook UI React95/React95#33

Open

nittashiori mentioned this issue Nov 27, 2020

storybook追加 nittashiori/dog-photo-app#3

Merged

trickydisco78 mentioned this issue Mar 12, 2021

allow global css dengbupapapa/storybook-addon-html-document#10

Open

How can I use CSS framework styles inside a storybook #25

How can I use CSS framework styles inside a storybook #25

Comments

croogie commented Apr 2, 2016

arunoda commented Apr 2, 2016 • edited by Hypnosphi Loading

andrioid commented Oct 19, 2016

arunoda commented Oct 19, 2016 • edited by Hypnosphi Loading

andrioid commented Oct 19, 2016 • edited by Hypnosphi Loading

wmhafiz commented Nov 14, 2016

felipecocco commented Dec 10, 2016

kirkstrobeck commented May 17, 2017

ndelangen commented May 17, 2017

sergiotapia commented May 24, 2017

ndelangen commented May 24, 2017

blairanderson commented Jun 16, 2017

adamchenwei commented Aug 16, 2017

kirkstrobeck commented Aug 16, 2017

Hypnosphi commented Aug 17, 2017

LukasMac commented Aug 24, 2017

davidruisinger commented Nov 14, 2017 • edited Loading

ndelangen commented Nov 14, 2017

davidruisinger commented Nov 14, 2017

Hypnosphi commented Nov 15, 2017 • edited Loading

bradfrost commented Mar 28, 2018

nickytonline commented Mar 28, 2018

bradfrost commented Mar 29, 2018 • edited Loading

nickytonline commented Mar 29, 2018

bradfrost commented Mar 29, 2018 • edited Loading

nickytonline commented Apr 3, 2018 • edited Loading

bradfrost commented Apr 8, 2018

nickytonline commented Apr 8, 2018 • edited Loading

amos80m commented Jan 8, 2019

jmarceli commented May 6, 2019

anton-paskanny commented May 17, 2019

snyderhaus commented Mar 30, 2020

shilman commented Mar 31, 2020 • edited Loading

scottc11 commented Apr 5, 2020

gkortsit commented Aug 12, 2020 • edited Loading

angelikipatrinou commented Aug 24, 2020

ArianZargaran commented Jan 8, 2021

trickydisco78 commented Mar 12, 2021

mleister97 commented Apr 22, 2021

Storybook v6.+ solution

aboudard commented May 11, 2021

Storybook v6.+ solution

belloviniciusf commented May 13, 2021

Storybook v6.+ solution

50l3r commented Sep 3, 2021

Storybook v6.+ solution

drik98 commented Dec 23, 2021

jdubs1994 commented Nov 3, 2022

shilman commented Nov 3, 2022

jdubs1994 commented Nov 3, 2022 • edited Loading

kerryj89 commented Dec 28, 2023 • edited Loading

arunoda commented Apr 2, 2016 •

edited by Hypnosphi

Loading

arunoda commented Oct 19, 2016 •

edited by Hypnosphi

Loading

andrioid commented Oct 19, 2016 •

edited by Hypnosphi

Loading

davidruisinger commented Nov 14, 2017 •

edited

Loading

Hypnosphi commented Nov 15, 2017 •

edited

Loading

bradfrost commented Mar 29, 2018 •

edited

Loading

bradfrost commented Mar 29, 2018 •

edited

Loading

nickytonline commented Apr 3, 2018 •

edited

Loading

nickytonline commented Apr 8, 2018 •

edited

Loading

shilman commented Mar 31, 2020 •

edited

Loading

gkortsit commented Aug 12, 2020 •

edited

Loading

jdubs1994 commented Nov 3, 2022 •

edited

Loading

kerryj89 commented Dec 28, 2023 •

edited

Loading