Skip to content
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

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

Closed
croogie opened this issue Apr 2, 2016 · 30 comments
Closed

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

croogie opened this issue Apr 2, 2016 · 30 comments

Comments

@croogie
Copy link

@croogie croogie commented Apr 2, 2016

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

This comment has been minimized.

Copy link
Member

@arunoda arunoda commented Apr 2, 2016

@arunoda arunoda closed this Apr 2, 2016
@andrioid

This comment has been minimized.

Copy link

@andrioid andrioid commented Oct 19, 2016

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

@arunoda

This comment has been minimized.

Copy link
Member

@arunoda arunoda commented Oct 19, 2016

@andrioid

This comment has been minimized.

Copy link

@andrioid andrioid commented Oct 19, 2016

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

This comment has been minimized.

Copy link

@wmhafiz wmhafiz commented Nov 14, 2016

Thanks head.html method works perfectly!

@felipecocco

This comment has been minimized.

Copy link

@felipecocco felipecocco commented Dec 10, 2016

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?

ndelangen pushed a commit that referenced this issue Apr 5, 2017
ndelangen pushed a commit that referenced this issue Apr 5, 2017
Add storybook to devDependencies.
ndelangen pushed a commit that referenced this issue Apr 11, 2017
Write a storybook for components in this addon #25
ndelangen added a commit that referenced this issue Apr 11, 2017
@kirkstrobeck

This comment has been minimized.

Copy link

@kirkstrobeck kirkstrobeck commented May 17, 2017

Both links are broken.

@ndelangen

This comment has been minimized.

Copy link
Member

@ndelangen ndelangen commented May 17, 2017

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

This comment has been minimized.

Copy link

@sergiotapia sergiotapia commented May 24, 2017

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

This comment has been minimized.

Copy link
Member

@ndelangen ndelangen commented May 24, 2017

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

This comment has been minimized.

Copy link
Contributor

@blairanderson blairanderson commented Jun 16, 2017

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

@adamchenwei

This comment has been minimized.

Copy link

@adamchenwei adamchenwei commented Aug 16, 2017

@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

This comment has been minimized.

Copy link

@kirkstrobeck kirkstrobeck commented Aug 16, 2017

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

@Hypnosphi

This comment has been minimized.

Copy link
Member

@Hypnosphi Hypnosphi commented Aug 17, 2017

Just updated the comments with outdated links

@LukasMac

This comment has been minimized.

Copy link

@LukasMac LukasMac commented Aug 24, 2017

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

@flavordaaave

This comment has been minimized.

Copy link

@flavordaaave flavordaaave commented Nov 14, 2017

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

This comment has been minimized.

Copy link
Member

@ndelangen ndelangen commented Nov 14, 2017

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

@flavordaaave

This comment has been minimized.

Copy link

@flavordaaave flavordaaave commented Nov 14, 2017

@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

This comment has been minimized.

Copy link
Member

@Hypnosphi Hypnosphi commented Nov 15, 2017

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

This comment has been minimized.

Copy link

@bradfrost bradfrost commented Mar 28, 2018

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

This comment has been minimized.

Copy link

@nickytonline nickytonline commented Mar 28, 2018

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

This comment has been minimized.

Copy link

@bradfrost bradfrost commented Mar 29, 2018

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

This comment has been minimized.

Copy link

@nickytonline nickytonline commented Mar 29, 2018

@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

This comment has been minimized.

Copy link

@bradfrost bradfrost commented Mar 29, 2018

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

@nickytonline

This comment has been minimized.

Copy link

@nickytonline nickytonline commented Apr 3, 2018

@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

image

@bradfrost

This comment has been minimized.

Copy link

@bradfrost bradfrost commented Apr 8, 2018

@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

This comment has been minimized.

Copy link

@nickytonline nickytonline commented Apr 8, 2018

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

This comment has been minimized.

Copy link

@amos80m amos80m commented Jan 8, 2019

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

This comment has been minimized.

Copy link

@jmarceli jmarceli commented May 6, 2019

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

@anton-paskanny

This comment has been minimized.

Copy link

@anton-paskanny anton-paskanny commented May 17, 2019

@jmarceli It works for me, thanks a lot!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.