Storybook: ストーリーブック内でCSSフレームワークスタイルを使用するにはどうすればよいですか
私のアプリケーションが、セマンティックUI、ブートストラップなどのCSSフレームワークに基づいているとしましょう。 コンポーネントが正しく表示されるように、ストーリーブック内にそのスタイルを簡単に組み込むにはどうすればよいですか？
croogie
全てのコメント35件
はい、そうです。 ここを読んでください-https：//github.com/kadirahq/react-storybook/blob/master/docs/setting-up-for-css.md
私はあなたが必要なものではありません、ただこれを再び開いてください。
UPD 2017-08-17（@hypnos）
https://storybook.js.org/configurations/add-custom-head-tags/
arunoda
2016年04月03日
リンクが壊れており、現在のマスターのファイルでリンクが見つかりません。
andrioid
2016年10月19日
これを確認してください： https ：
UPD 2017-08-17（@hypnos）
https://storybook.js.org/configurations/custom-webpack-config/
arunoda
2016年10月19日
ありがとう。 より簡単な方法は、「。storybook」ディレクトリにhead.htmlファイルを追加することでした。 ブートストラップまたはセマンティックUIの要素
UPD 2017-08-17（@hypnos）
今はpreview_head.html
andrioid
2016年10月19日
おかげでhead.htmlメソッドは完璧に機能します！
wmhafiz
2016年11月14日
追加するファイルがURLを介して提供されず、代わりにローカルでホストされている場合、head.htmlもそれを実行するための最良の方法でしょうか？ それはどのように機能しますか？
felipecocco
2016年12月10日
両方のリンクが壊れています。
kirkstrobeck
2017年05月17日
リンクが壊れて申し訳ありませんが、これは残念ながらリストラの結果です。見つける唯一の方法は検索です。
@kirkstrobeckで何を探している/助けが必要ですか？ この問題はかなり古く、クローズされています。
特定の問題が発生した場合は、お知らせください👍。
ndelangen
2017年05月17日
私はここに着陸し、React Storybookを実際のアプリケーションに統合する方法を見つけようとしました。ここでは、すべてのスタイルがapp/assets/stylesheets scssファイルにあります
sergiotapia
2017年05月24日
Webpack構成を拡張するか、独自のカスタムWebpack構成を提供する必要があります。
その中で、 .scssファイルをどう処理するかをwebpackに指示する必要があります。 別名、 sass-loaderを追加する必要があります。
おそらく、これはすでにアプリ用にセットアップされており、ほとんどの場合、webpack構成からコピーアンドペーストできますか？
ndelangen
2017年05月24日
ドキュメントにあります： https ：//storybook.js.org/configurations/default-config/#css -support
blairanderson
2017年06月16日
@arunoda上記でマークした顔を混乱させた上記の2つのリンクを削除することは可能でしょうか？ 将来このページに入る他の人のために時間を節約してください。 ありがとう！
achenwei-chwy
2017年08月16日
混乱した反応でおそらく十分です。 私もem 'に賛成しました。
kirkstrobeck
2017年08月16日
古いリンクでコメントを更新しました
Hypnosphi
2017年08月17日
ストーリーブックのヘッダーファイルはpreview-head.htmlと呼ばれます。参照：
https://storybook.js.org/configurations/add-custom-head-tags/
LukasMac
2017年08月24日
「メイン」アプリ内で、グローバルスタイルは、すべてのグローバルCSSルールを含むテンプレート文字列をエクスポートするJSファイル内で定義されます。
ストーリーがレンダリングされるiframeにCSS定義を含むテンプレート文字列を追加する方法はありますか？
編集：
私はreact-styled-componentsを使用しているので、今はinjectGlobalヘルパーを使用しています。
flavordaaave
2017年11月14日
@ flavordaaaveconfig.jsのスタイルタグにスタイルを挿入するだけで使用したいと思います
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};
...
}
`
したがって、今のところ、上記の編集で述べたように、 react-styled-componentsのinjectGlobalヘルパーを使用しています。
/* .storybook/config.js */
...
import { injectGlobal } from 'styled-components'
import styles from '../src/styles'
injectGlobal`${styles}`
...
これで同様の結果を得ることができます：
// 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)
こんにちは！
私は自分のスタイルシートをストーリーブックにリンクしようとしていますが、印象的です。
次の手順に従って、CSSファイル（プロジェクトルートのstatic/style.cssにあります）を次の行でインポートしました： import '../static/style.css'; 。 その結果、rでエラーが発生しました
Error: Can't resolve '../i/link.svg' in [path]
スタイルシート内のすべての外部参照リソースを調整するために、このすべてのリガマロールを実行する必要はないので、別の方法を試してみようと思いました。
これらのドキュメントごとにpreview-head.htmlを追加し、次のようにスタイルシートをリンクしました。
<link rel="stylesheet" href="./static/style.css" />
ただし、これにより、リソースの404エラーが発生します。 パスの問題かもしれないと思いますが、Storybookが実行されている場所に対してどのパスを使用すべきかがわかりません。 何か案は？
bradfrost
2018年03月28日
CSSがCDNにないために404を取得している場合は、追加のパラメーターを渡して、静的フォルダーでStorybookを実行し、ファイルを./some.cssとして参照できます。 storybook -p 9001 -s ./a-static-folderを実行し、cssをそのフォルダーに配置します。
nickytonline
2018年03月29日
提案をありがとう、@ nickytonline。 残念ながら、それはうまくいかなかったようです。 static/style.cssファイルがあり、コマンドstorybook -p 9001 -s ./static 。 その結果、 storybook: command not found 。 npm run storybook -p 9001 -s ./staticを実行しましたが、スタイルシートで404エラーが発生しました。
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
2018年03月29日
@nickytonlineはい、 <link rel="stylesheet" href="./styles.css" />としてリンクされていました。
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
nickytonline
2018年04月03日
@nickytonlineデモプロジェクトをありがとうございました！ ほんとうにありがとう。
私がまだ直面している問題は、元の投稿に反映されimportを使用してスタイルをプロジェクトに組み込むことです。 残念ながら、フォントやアイコン、背景画像などのアセットが解決されない場合、このメソッドはエラーをスローします。 それを改善する方法があることはわかっていますが、ドキュメントの先頭にあるスタイルシートを昔ながらの方法でリンクすることを検討しているだけだと思います。
bradfrost
2018年04月08日
nickytonline
2018年04月08日
あなたができることは、ルートフォルダに「パブリック」フォルダを作成することです。
'public / semantic'フォルダー内の 'node_modules / semantic-ui-css'のコンテンツを害します。
package.json =>スクリプト=>ストーリーブック=>追加 '' -s ./public "
最後のもの！！！ コンポーネントの.lessファイルで@ import '/ semantic / semantic.min.css'を実行します。
これで、アイコンがスムーズに機能するはずです。
amos80m
2019年01月08日
Storybook v5およびnormalize.css "framework"の場合、 .storybook/config.jsファイル内にimport "normalize.css";追加するだけで十分です。
jmarceli
2019年05月06日
@jmarceliそれは私のために働きます、どうもありがとう！
anton-paskanny
2019年05月17日
これはv6でも実行可能なオプションですか？
Storybook v5および
normalize.css"framework"の場合、.storybook/config.jsファイル内にimport "normalize.css";追加するだけで十分です。
snyderhaus
2020年03月30日
@snyderhausはい。ただし、5.3以降、 config.jsは非推奨になり、代わりにpreview.jsを使用することを強くお勧めします。 より詳しい情報：
https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#to -mainjs-configuration
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ファイルにインラインローダー構文を使用しました。
"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
2020年04月05日
v6 +を使用している場合、 config.jsを使用したソリューションは機能しません。
私はそれを次のように機能させることができました：
.storybookフォルダーにpreview.jsという名前のファイルを作成します- 外部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'
2番目のインポートは、いくつかのデフォルトのグローバルスタイルをオーバーライドするために追加されました。
私のフォルダ構造：
.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
2020年08月12日
私のために働いたのは、。/ 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
2020年08月24日
関連する問題
tomitrescak
·
3コメント
dnlsandiego
·
3コメント
purplecones
·
3コメント
tlrobinson
·
3コメント
sakulstra
·
3コメント
最も参考になるコメント
ドキュメントにあります： https ：//storybook.js.org/configurations/default-config/#css -support