Storybook: 如何在故事书中使用CSS框架样式

创建于 2016-04-03  ·  35评论  ·  资料来源: storybookjs/storybook

假设我的应用程序基于某些CSS框架，例如语义UI，Bootstrap或类似的东西。 我如何轻松地将这些样式合并到故事书中，以便我的组件正确显示？

compatibility with other tools question / support
资料来源
picture croogie
👍11

最有用的评论

在文档中找到： https: //storybook.js.org/configurations/default-config/#css -support

picture blairanderson 于 2017-06-16
👍32 ❤10 👎4 🎉3

所有35条评论

是的。 在这里阅读-https: //github.com/kadirahq/react-storybook/blob/master/docs/setting-up-for-css.md

我那不是您所需要的，只需重新打开即可。

UPD 2017年8月17日（@hypnos）
https://storybook.js.org/configurations/add-custom-head-tags/

arunoda picture arunoda 于 2016-04-03
😕23 👎21

链接已损坏，我在当前主文件的文件中找不到它。

andrioid picture andrioid 于 2016-10-19
👍33

检查以下内容： https :

UPD 2017年8月17日（@hypnos）
https://storybook.js.org/configurations/custom-webpack-config/

arunoda picture arunoda 于 2016-10-19
👎20 😕15

谢谢。 一种更简单的方法是使用以下命令在“ .storybook”目录中添加head.html文件： Bootstrap或语义UI的元素

UPD 2017年8月17日（@hypnos）
现在是preview_head.html

andrioid picture andrioid 于 2016-10-19
👍24 👎2

谢谢head.html方法非常有效！

wmhafiz picture wmhafiz 于 2016-11-14

如果您要添加的文件不是通过URL而是通过本地托管，head.html还是最好的方法吗？ 那将如何工作？

felipecocco picture felipecocco 于 2016-12-10
👍6

两个链接都断开了。

kirkstrobeck picture kirkstrobeck 于 2017-05-17
👍9

对不起，链接断开，很遗憾，这是我们重组的结果。唯一的找到方法是搜索。

您在寻找什么/ @ kirkstrobeck需要帮助？ 这个问题已经很久很久了。
如果您有特定问题，我们可以为您提供帮助，👍。

ndelangen picture ndelangen 于 2017-05-17

我登陆这里试图弄清楚如何将React Storybook集成到一个真正的应用程序中，我们所有的样式都在app/assets/stylesheets scss文件中

sergiotapia picture sergiotapia 于 2017-05-24
👍6

您需要扩展我们的webpack配置/提供自己的自定义webpack配置。

在其中，您需要告诉webpack如何处理.scss文件。 也就是，您需要添加sass-loader 。

可能您已经为您的应用设置了此设置，并且可以从它的webpack配置中复制粘贴？

ndelangen picture ndelangen 于 2017-05-24

在文档中找到： https: //storybook.js.org/configurations/default-config/#css -support

blairanderson picture blairanderson 于 2017-06-16
👍32 ❤10 👎4 🎉3

@arunoda是否可以删除上面我在上面标记的困惑面孔的两个链接？ 为以后将来进入此页面的其他人节省时间。 谢谢！

achenwei-chwy picture achenwei-chwy 于 2017-08-16

困惑的反应可能就足够了。 我也赞成。

kirkstrobeck picture kirkstrobeck 于 2017-08-16

刚刚使用过时的链接更新了评论

Hypnosphi picture Hypnosphi 于 2017-08-17
👍2

故事书的头文件称为preview-head.html参考：
https://storybook.js.org/configurations/add-custom-head-tags/

LukasMac picture LukasMac 于 2017-08-24
👍13 🎉1

在我的“主”应用程序中，我的全局样式在一个JS文件中定义，该JS文件导出包含所有全局CSS规则的模板字符串。
有没有一种方法可以将带有CSS定义的模板字符串添加到呈现故事的iframe中？

编辑：
由于我使用的是react-styled-components，因此现在仅使用其injectGlobal帮助器。

flavordaaave picture flavordaaave 于 2017-11-14

@flavordaaave我想您只想使用config.js中的样式标签中的样式

ndelangen picture ndelangen 于 2017-11-14

@ndelangen到目前为止，注入全局样式的所有可能性（ import './styles.css';或通过preview-head.html ）都不允许我注入带有动态参数的样式。

我的样式如下所示：

/* .storybook/config.js */

import theme from './theme'

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

所以现在我使用的injectGlobal助手从react-styled-components正如我在编辑如上所述。

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

injectGlobal`${styles}`
...
flavordaaave picture flavordaaave 于 2017-11-14
👍10

您可以通过以下方式获得类似的结果：

// 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)
Hypnosphi picture Hypnosphi 于 2017-11-15
👍5

嗨，您好！
我正在尝试将样式表链接到Storybook，并予以淘汰。

我按照以下说明使用以下行导入我的CSS文件（位于项目根目录的static/style.css中）： import '../static/style.css'; 。 导致r错误

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

我不想遍历所有rigamarole来协调样式表中的所有外部引用资源，因此我想我会尝试另一种方法。

我为这些文档添加了preview-head.html ，将我的样式表链接如下：

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

但是，这将导致资源404错误。 我_可能只是路径问题，但似乎找不到相对于Storybook运行位置的路径。 有任何想法吗？

bradfrost picture bradfrost 于 2018-03-28

如果由于CSS不在CDN上而获得404，则可以传递一个额外的参数以使用静态文件夹运行Storybook，并将文件引用为./some.css 。 运行storybook -p 9001 -s ./a-static-folder并将css放入该文件夹。

nickytonline picture nickytonline 于 2018-03-29
👍4

感谢您的建议，@ nickytonline。 不幸的是，这似乎没有用。 我的文件放在static/style.css并且运行了命令storybook -p 9001 -s ./static 。 结果是storybook: command not found 。 我运行了npm run storybook -p 9001 -s ./static ，但仍然在样式表上导致404错误。

bradfrost picture bradfrost 于 2018-03-29

@bradfrost ，为澄清npm run storybook -p 9001 -s ./static ， ./static行为类似于故事书中的/ ，因此，如果文件位于项目中的static/styles.css中，您的链接将是<link rel="stylesheet" href="./styles.css" />而不是<link rel="stylesheet" href="./static/styles.css" />

nickytonline picture nickytonline 于 2018-03-29
👍8

@nickytonline是的，我把东西链接为<link rel="stylesheet" href="./styles.css" /> 。

bradfrost picture bradfrost 于 2018-03-29

@bradfrost这让我感到<link />标签引用在故事书中使用的静态资产的示例。 它可以在这里找到， https://github.com/nickytonline/for-brad

您可以在此处看到所引用的样式表， https：//github.com/nickytonline/for-brad/blob/master/.storybook/preview-head.html#L1

image

nickytonline picture nickytonline 于 2018-04-03
👍7 ❤2

@nickytonline非常感谢您的演示项目！ 我真的很感激。

我仍然遇到的问题反映在我的原始文章中，该import将样式添加到项目中。 不幸的是，如果字体，图标或背景图像之类的资源无法解析，该方法将引发错误。 我意识到可以采取一些补救措施，但是我想我只是想以一种老式的方式在文档头部链接一个样式表。

bradfrost picture bradfrost 于 2018-04-08

抱歉，我不能吸收您原始帖子的全部内容，这很不好。 如果您想避免使用rigamarole，那真是个泡菜。 不得不考虑一点。

nickytonline picture nickytonline 于 2018-04-08

您可以做的是在根文件夹中创建一个“ public”文件夹。
在“公共/语义”文件夹中，查找“ node_modules / semantic-ui-css”的内容。
在package.json =>脚本=>故事书=>添加``-s ./public”
最后一件事！！！ 在组件.LESS文件做@import“/semantic/semantic.min.css”;
现在，Icon应该可以正常工作了。

amos80m picture amos80m 于 2019-01-08
😕1

对于Storybook v5和normalize.css “ framework”，只需在.storybook/config.js文件内添加import "normalize.css";就足够了。

jmarceli picture jmarceli 于 2019-05-06
👍11 🎉3

@jmarceli它对我

anton-paskanny picture anton-paskanny 于 2019-05-17

这对于v6仍然可行吗？

对于Storybook v5和normalize.css “ framework”，只需在.storybook/config.js文件内添加import "normalize.css";就足够了。

snyderhaus picture snyderhaus 于 2020-03-30

@snyderhaus是的，尽管自5.3起已弃用config.js ，我们强烈建议改用preview.js 。 更多信息：

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

shilman picture shilman 于 2020-03-31

我已经多次参加这个线程进行了许多项目！ 因此，这是我自己以及其他人的参考。

这对我有用。

// 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';

我的style.scss正在使用sass变量覆盖默认的引导主题

我能够使用故事书的默认webpack配置，并像这样引用样式表，另外还对sass文件使用了内联加载器语法，如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 picture scottc11 于 2020-04-05
👍11

对于使用v6 +的任何人，使用config.js的解决方案将不起作用。

我设法使它像这样工作：

  • 在.storybook文件夹中创建一个名为preview.js .storybook文件
  • 导入外部CSS。 在我的情况下，它们是scss文件，所以我将其导入为：
// .storybook/preview.js

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

添加了第二个导入以覆盖一些默认的全局样式。

我的文件夹结构：

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

使用的软件包：

"@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 picture gkortsit 于 2020-08-12
👍4

对我有用的是在./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 picture angelikipatrinou 于 2020-08-24
👍1
此页面是否有帮助？
0 / 5 - 0 等级

相关问题

sakulstra picture sakulstra  ·  3评论
arunoda picture arunoda  ·  3评论
miljan-aleksic picture miljan-aleksic  ·  3评论
dnlsandiego picture dnlsandiego  ·  3评论
levithomason picture levithomason  ·  3评论