Storybook: 스토리 북 내에서 CSS 프레임 워크 스타일을 사용하려면 어떻게해야합니까?

에 만든 2016년 04월 03일 · 35코멘트 · 출처: storybookjs/storybook

내 애플리케이션이 Semantic UI, Bootstrap 등과 같은 일부 CSS 프레임 워크를 기반으로한다고 가정 해 보겠습니다. 구성 요소가 올바르게 표시되도록 스토리 북에 해당 스타일을 쉽게 통합 할 수있는 방법은 무엇입니까?

compatibility with other tools question / support

출처

croogie

👍11

가장 유용한 댓글

문서에서 찾을 수 있습니다 : https://storybook.js.org/configurations/default-config/#css -support

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-08-17 (@hypnos)
https://storybook.js.org/configurations/add-custom-head-tags/

arunoda 에 2016년 04월 03일

😕23 👎21

링크가 끊어져 현재 마스터의 파일에서 찾을 수 없습니다.

andrioid 에 2016년 10월 19일

👍33

이것을 확인하십시오 : https://getstorybook.io/docs/configurations/custom-webpack-config

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

arunoda 에 2016년 10월 19일

👎20 😕15

감사. 더 쉬운 방법은 ".storybook"디렉토리에 head.html 파일을 추가하는 것입니다. 부트 스트랩 또는 시맨틱 UI 용 요소

UPD 2017-08-17 (@hypnos)
이제 preview_head.html

andrioid 에 2016년 10월 19일

👍24 👎2

감사합니다. head.html 메소드가 완벽하게 작동합니다!

wmhafiz 에 2016년 11월 14일

추가하려는 파일이 URL을 통해 제공되지 않고 대신 로컬로 호스팅되는 경우 head.html이 가장 좋은 방법일까요? 어떻게 작동할까요?

felipecocco 에 2016년 12월 10일

👍6

두 링크가 모두 끊어졌습니다.

kirkstrobeck 에 2017년 05월 17일

👍9

링크가 깨져서 죄송합니다. 이것은 불행히도 구조 조정의 결과입니다. 찾을 수있는 유일한 방법은 검색입니다.

@kirkstrobeck에 대해 무엇을 찾고 하십니까 ? 이 문제는 매우 오래되었으며 종결되었습니다.
특정 문제가있는 경우 도움을 드릴 수 있습니다. 👍.

ndelangen 에 2017년 05월 17일

모든 스타일이 app/assets/stylesheets scss 파일에있는 실제 애플리케이션에 React Storybook을 통합하는 방법을 알아보기 위해 여기에 왔습니다.

sergiotapia 에 2017년 05월 24일

👍6

웹팩 구성을 확장하고 사용자 지정 웹팩 구성을 제공해야합니다.

그 안에 .scss 파일로 무엇을해야하는지 webpack에 알려줘야합니다. 일명 sass-loader 를 추가해야합니다.

이미 앱에 대한 설정이 이미 있고 대부분의 웹팩 구성에서 복사하여 붙여 넣을 수 있습니까?

ndelangen 에 2017년 05월 24일

문서에서 찾을 수 있습니다 : https://storybook.js.org/configurations/default-config/#css -support

blairanderson 에 2017년 06월 16일

👍32 ❤10 👎4 🎉3

@arunoda 위에서 표시 한 얼굴을 혼란스럽게하는 두 링크 위를 제거 할 수 있습니까? 나중에이 페이지를 입력하는 다른 사용자를 위해 시간을 절약 할 수 있습니다. 감사!

achenwei-chwy 에 2017년 08월 16일

혼란스러운 반응으로 충분할 것입니다. 나도 그들을 찬성했다.

kirkstrobeck 에 2017년 08월 16일

오래된 링크로 댓글을 업데이트했습니다.

Hypnosphi 에 2017년 08월 17일

👍2

이야기 책의 헤더 파일은 preview-head.html 참조 :
https://storybook.js.org/configurations/add-custom-head-tags/

LukasMac 에 2017년 08월 24일

👍13 🎉1

내 "기본"앱 내에서 내 전역 스타일은 모든 전역 CSS 규칙을 포함하는 템플릿 문자열을 내보내는 JS 파일 내에 정의됩니다.
스토리가 렌더링되는 iframe에 CSS 정의가있는 템플릿 문자열을 추가하는 방법이 있습니까?

편집하다:
react-styled-components를 사용하고 있기 때문에 이제 injectGlobal 도우미를 사용하고 있습니다.

flavordaaave 에 2017년 11월 14일

@flavordaaave config.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}`
...

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 에 2017년 11월 15일

👍5

안녕!
내 스타일 시트를 Storybook에 연결하려고하는데 눈에 띕니다.

이 지침 에 따라 import '../static/style.css'; 줄을 사용 하여 내 CSS 파일 (프로젝트 루트의 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일

👍4

제안 해 주셔서 감사합니다, @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일

👍8

@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일

👍7 ❤2

@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일

😕1

Storybook v5 및 normalize.css "framework"의 경우 .storybook/config.js 파일에 import "normalize.css"; 만 추가하면됩니다.

jmarceli 에 2019년 05월 06일

👍11 🎉3

@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 변수를 사용하여 기본 부트 스트랩 테마를 재정의합니다.

나는 이야기 책 기본 웹팩 설정을 사용하고 단지 추가 내 용 인라인 로더 구문을 사용하여, 그래서 같은 스타일 시트를 참조 할 수 있었다 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일

👍11

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'

두 번째 가져 오기는 일부 기본 전역 스타일을 재정의하기 위해 추가되었습니다.

내 폴더 구조 :

.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일

👍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 에 2020년 08월 24일

👍1

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

Storybook: 스토리 북 내에서 CSS 프레임 워크 스타일을 사용하려면 어떻게해야합니까?

가장 유용한 댓글

모든 35 댓글

관련 문제