Storybook: How can I use CSS framework styles inside a storybook
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?
croogie
All 35 comments
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/
arunoda
on 3 Apr 2016
Link is broken and I can't find it in the file in current master.
andrioid
on 19 Oct 2016
Check this: https://getstorybook.io/docs/configurations/custom-webpack-config
UPD 2017-08-17 (@hypnos)
https://storybook.js.org/configurations/custom-webpack-config/
arunoda
on 19 Oct 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
andrioid
on 19 Oct 2016
Thanks head.html method works perfectly!
wmhafiz
on 14 Nov 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?
felipecocco
on 10 Dec 2016
Both links are broken.
kirkstrobeck
on 17 May 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 👍 .
ndelangen
on 17 May 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
sergiotapia
on 24 May 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?
ndelangen
on 24 May 2017
found in documentation: https://storybook.js.org/configurations/default-config/#css-support
blairanderson
on 16 Jun 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!
achenwei-chwy
on 16 Aug 2017
The confused reactions are probably enough. I upvoted em’ too.
kirkstrobeck
on 16 Aug 2017
Just updated the comments with outdated links
Hypnosphi
on 17 Aug 2017
Header file for story book is called preview-head.html Reference:
https://storybook.js.org/configurations/add-custom-head-tags/
LukasMac
on 24 Aug 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.
flavordaaave
on 14 Nov 2017
@flavordaaave I think you'll want to use just inject the styles in a style-tag from config.js
ndelangen
on 14 Nov 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}`
...
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)
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?
bradfrost
on 28 Mar 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.
nickytonline
on 29 Mar 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.
bradfrost
on 29 Mar 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" />
nickytonline
on 29 Mar 2018
@nickytonline Yep, I had things linked up as <link rel="stylesheet" href="./styles.css" />.
bradfrost
on 29 Mar 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
nickytonline
on 3 Apr 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.
bradfrost
on 8 Apr 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.
nickytonline
on 8 Apr 2018
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.
amos80m
on 8 Jan 2019
For Storybook v5 and normalize.css "framework" it is enough to just add import "normalize.css"; inside .storybook/config.js file.
jmarceli
on 6 May 2019
@jmarceli It works for me, thanks a lot!
anton-paskanny
on 17 May 2019
Is this still a viable option with v6?
For Storybook v5 and
normalize.css"framework" it is enough to just addimport "normalize.css";inside.storybook/config.jsfile.
snyderhaus
on 30 Mar 2020
@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
shilman
on 31 Mar 2020
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",
scottc11
on 5 Apr 2020
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.jsin the.storybookfolder - 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"
gkortsit
on 12 Aug 2020
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
angelikipatrinou
on 24 Aug 2020
Related issues
wahengchang
·
3Comments
shilman
·
3Comments
levithomason
·
3Comments
tomitrescak
·
3Comments
Jonovono
·
3Comments
Most helpful comment
found in documentation: https://storybook.js.org/configurations/default-config/#css-support