Storybook: 모든 Storybook iframe에 전역 스타일 (scss)을 한 번 포함하려면 어떻게합니까?

global.scss 파일을 angular.json 추가해보십시오.

defaultProject (json 내부에 defaultProject 속성이 있음)를 확인하고 스타일 목록에 추가합니다.

"styles": [
              "projects/your-cli-project/src/lib/styles/your-styles.scss"
            ],

나는 그렇게하고 잘 작동합니다. 그게 당신을위한 선택인가요?

안녕하세요 여러분! 최근이 문제에서 많은 일이 일어나지 않은 것 같습니다. 여전히 질문, 의견 또는 버그가 있으면 토론을 계속하십시오. 안타깝게도 모든 문제를 다룰 시간이 없습니다. 우리는 항상 기여에 열려 있으므로 도움이 필요하면 풀 요청을 보내주십시오. 비활성 문제는 30 일 후에 마감됩니다. 감사!

안녕하세요 @omaracrystal 은 제가 한 방법입니다.
.storybook/config.js 파일에서 올바른 로더를 인라인으로 가져 오기를 추가하십시오.

import '!style-loader!css-loader!sass-loader!./scss-loader.scss';

그런 다음 scss-loader.scss 파일에서 필요한 모든 스타일을 추가 / 가져옵니다.

$font-path: '../projects/lib/src/theming/fonts/OpenSans/';

<strong i="13">@import</strong> '../projects/lib/src/theming/reset.scss';
<strong i="14">@import</strong> '../projects/lib/src/theming/main.scss';

html {
  font-family: $font-name;
  font-size: $font-size--small;
}

@kroeder 가 제안한 솔루션은 Angular 응용 프로그램의 구성 요소를 사용하는 한 작동하지만 라이브러리의 경우 angular.json 파일에 styles 속성을 추가 할 수 없습니다.

global.scss 파일을 angular.json 추가해보십시오.

defaultProject (json 내부에 defaultProject 속성이 있음)를 확인하고 스타일 목록에 추가합니다.

"styles": [
              "projects/your-cli-project/src/lib/styles/your-styles.scss"
            ],

나는 그렇게하고 잘 작동합니다. 그게 당신을위한 선택인가요?

이 작업을 정확히 수행했지만 스토리 북을 실행할 때로드되지 않는 것 같습니다.

안녕하세요 여러분! 최근이 문제에서 많은 일이 일어나지 않은 것 같습니다. 여전히 질문, 의견 또는 버그가 있으면 토론을 계속하십시오. 안타깝게도 모든 문제를 다룰 시간이 없습니다. 우리는 항상 기여에 열려 있으므로 도움이 필요하면 풀 요청을 보내주십시오. 비활성 문제는 30 일 후에 마감됩니다. 감사!

안녕, 또 나야! 이 문제를 마무리하여 관리자가 대신 현재 개발 로드맵에 집중할 수 있도록하겠습니다. 언급 된 문제가 여전히 우려되는 경우 새 티켓을 열고이 이전 티켓을 언급하십시오. 스토리 북을 사용해 주셔서 감사합니다!

안녕하세요 @omaracrystal 은 제가 한 방법입니다.
.storybook/config.js 파일에서 올바른 로더를 인라인으로 가져 오기를 추가하십시오.

import '!style-loader!css-loader!sass-loader!./scss-loader.scss';

그런 다음 scss-loader.scss 파일에서 필요한 모든 스타일을 추가 / 가져옵니다.

$font-path: '../projects/lib/src/theming/fonts/OpenSans/';

<strong i="14">@import</strong> '../projects/lib/src/theming/reset.scss';
<strong i="15">@import</strong> '../projects/lib/src/theming/main.scss';

html {
  font-family: $font-name;
  font-size: $font-size--small;
}

@kroeder 가 제안한 솔루션은 Angular 응용 프로그램의 구성 요소를 사용하는 한 작동하지만 라이브러리의 경우 angular.json 파일에 styles 속성을 추가 할 수 없습니다.

모두에게 효과가 있습니까? 내 편이 아닙니다 :(

@ozanmanav .storybook/config.js 에서 가져 오려고 했습니까?

추신 : 저에게는 작동하지만 webpack-loaders없이 .css 파일 만 가져 오기 때문입니다.

Storybook v5.3의 main.js 파일 구조를 사용하면 더 이상 작동하지 않는 것 같습니다.

@garrettmaring 당신과 함께 시도 않았다 .storybook/preview.js 보다는 .storybook/config.js ?

안녕하세요.
마침내 import '!style-loader!css-loader!./main.css' 사용하여 .css 파일에서 작동하도록했습니다.
처음에는 webpack 구성을 시도했지만 모든 사용자 지정 규칙을 제거하고 위와 같이 인라인했습니다. 분명히 npm은 로더를 설치합니다.

@shilman 예, 그랬습니다 👍 몇 가지 문서를 보았을 때 꽤 분명합니다. 메인 스토리 북 문서에 더 명확한 문서를위한 공간이있을 수 있습니다. 이 기사 가 명확하다는 것을 알았습니다.

@garrettmaring 문서를 개선하는 데 도움이되도록 PR을 제출하고 있습니까?

안녕하세요.
마침내 import '!style-loader!css-loader!./main.css' 사용하여 .css 파일에서 작동하도록했습니다.
처음에는 webpack 구성을 시도했지만 모든 사용자 지정 규칙을 제거하고 위와 같이 인라인했습니다. 분명히 npm은 로더를 설치합니다.

내가 방금 알아 낸 참고로이 접근 방식은 로컬에서 스토리 북을 제공 할 때 경이로울 수 있지만 빌드 스토리 북에서는 작동하지 않습니다 (내가 본 것에서).

내 솔루션
preview-head.html에 <link rel="stylesheet" href="./your-global-styles.css" /> 을 추가합니다. 그런 다음 your-global-styles.css 디렉토리의 -s 플래그를 사용하여 스타일을 스토리 북의 빌드 디렉토리에 복사합니다. 이제 iframe.html은 동일한 디렉토리에서 your-global-styles.css 를 "참조해야합니다".

이 문제는 로컬에서 실행할 때만 브라우저 콘솔에서 localhost/your-global-styles.css 찾을 수 없다고 표시되지만 여전히 의도 한대로 작동합니다.

누구든지 이것에 접근하는 더 좋은 방법이 있거나 적절한 해결책을 알고 있다면 알려주십시오 :)

다음을 사용하여 스토리 북에 scss 파일을 제공합니다.

import '! style-loader! css-loader! sass-loader! ./ main.scss';

이것은 우리에게 잘 작동합니다.

@blemaire 어디에서 그 라인을 사용하고 있습니까?

@blemaire 어디에서 그 라인을 사용하고 있습니까?

@lopis 는 .storybook 폴더에 preview.js 를 만들고 그 줄을 그 안에 넣습니다.

모두 감사합니다. 확인

• .storybook (또는 원하는 위치)에 scss 파일을 추가합니다.
• .storybook/preview.js 만드는 중
• preview.js 디렉토리에 import '!style-loader!css-loader!sass-loader!./styles.scss'; 추가
• "css-loader" 에 devDependency로 package.json

우리를 위해 일합니다. Storybook icw an Angular 9 라이브러리 ( angular.json 파일에 추가하는 옵션 없음)

nextjs 기반 설정에서 import "../styles/main.css"; (메인 앱에서와 같이)의 간단한 줄은 .storybook/preview.js 스타일을 올바르게 추가합니다.

위의 솔루션은 모든 경로가 상대적인 ../../src/main.scss 이지만 현재 프로젝트에서 SCSS 전역 / 별칭을 사용하는 경우 작동합니다.

Storybook에 대한 내 main.js 웹팩 구성이 별칭을 컴파일 할 수 있습니다. 하지만 전역 / 별칭 SCSS를 내 preview.js 로 가져 오려고하면 경로를 확인할 수 없습니다.

어디로 가야할지 모르겠습니다.

import '!style-loader!css-loader!sass-loader!./scss-loader.scss';

나는 이것을 시도했지만 오류가 발생합니다. 내 전역 CSS 변수와 믹스 인에 대해 알기 위해 Storybook이 필요합니다.

ERR! import '!style-loader!css-loader!sass-loader!./scss-loader.scss';
ERR!        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
ERR! 
ERR! SyntaxError: Unexpected string

nextjs 기반 설정에서 import "../styles/main.css"; (메인 앱에서와 같이)의 간단한 줄은 .storybook/preview.js 스타일을 올바르게 추가합니다.

이 styles / main.css에 전역 SCSS 변수가 포함되어 있습니까? 스토리 북에 적용 되나요? 시도했지만 여전히 SassError: Undefined variable: $my-variable-here

안녕하세요 @omaracrystal 은 제가 한 방법입니다.
.storybook/config.js 파일에서 올바른 로더를 인라인으로 가져 오기를 추가하십시오.

import '!style-loader!css-loader!sass-loader!./scss-loader.scss';

그런 다음 scss-loader.scss 파일에서 필요한 모든 스타일을 추가 / 가져옵니다.

$font-path: '../projects/lib/src/theming/fonts/OpenSans/';

<strong i="15">@import</strong> '../projects/lib/src/theming/reset.scss';
<strong i="16">@import</strong> '../projects/lib/src/theming/main.scss';

html {
  font-family: $font-name;
  font-size: $font-size--small;
}

@kroeder 가 제안한 솔루션은 Angular 응용 프로그램의 구성 요소를 사용하는 한 작동하지만 라이브러리의 경우 angular.json 파일에 styles 속성을 추가 할 수 없습니다.

모두에게 효과가 있습니까? 내 편이 아닙니다 :(

아니. 나도 도움이되지 않습니다. 이제이 오류가 발생합니다.

ERR! import '!style-loader!css-loader!sass-loader!./scss-loader.scss';
ERR!        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
ERR! 
ERR! SyntaxError: Unexpected string

버그 설명
모든 Storybook Iframe에 대해 글로벌 스타일 (scss)을 한 번 통합하는 여러 방법을 시도했지만 실패했습니다. 이 작업을 수행하는 명확하고 간결한 방법이없는 것 같습니다.

재현하려면
시도 :

1. 
   
   • 각 구성 요소 내에서 전역 스타일을 가져옵니다.
   
   
   • 결과 : 스타일이 적용되지만 여러 global.scss 스타일이 {story #} x 번 반복됩니다.
   
   
2. 
   
   • 사용자 정의 웹팩 구성에 대한 지침을 따르십시오 : https://storybook.js.org/docs/configurations/custom-webpack-config/
   
   
   • 결과 : 이것은 스토리 북에게 scss를 읽도록 지시 할 뿐이며 실제로 모든 스토리에 적용되는 전역 파일을 설정하지는 않습니다.
   
   
3. 
   
   • 한 곳에서는 Storybook 용 데코레이터를 만들고 그런 식으로 "글로벌"CSS를 적용하는 것이 좋습니다.
   
   
   • 결과 : 내가하려는 작업 (여러 스타일, 믹스 인, 변수 등)에서 작동하지 않습니다. 이것은 작은 CSS 변경에만 작동합니다.
   
   
4. 
   
   • .storybook 아래의 구성에서 require ( '../ libs / storybook / global-styles.scss'); loadStories 함수 내
   
   
   • 결과 : 아무것도
   
   
5. 
   
   • Storybook index.ts 내에서 글로벌 스타일 가져 오기를 시도했습니다.
   
   
   • 결과 : 아무것도
   
   

6. • angular.json 파일을 통해 전역 스타일 추가 시도

     • 결과 : 아무것도

예상되는 행동
모든 스토리의 Iframe에 적용 할 수 있도록 글로벌 (scss) 파일을 한 곳에서 가져올 수 있기를 기대합니다. 내가 알지 못하는 구성 설정이있을 수 있습니까?

체계:

• 운영체제 : MacOS
• 기기 : Macbook Pro 2015
• 브라우저 : 크롬
• 프레임 워크 : 각도
• 애드온 :-[addon-centered, addon-viewport, addon-info]
• 버전 : [^ 5.0.1]

추가 컨텍스트
이 문제를 쉽게 해결할 수있는 스토리 북의 일부 구성이 누락되기를 바랍니다.

이 문제가 해결 된 적이 있습니까? 그렇다면 해결책은 무엇 이었습니까? 감사!

@caseytrombley 해결책은 preview.js에 import '!style-loader!css-loader!sass-loader!./styles.scss'; 을 추가하는 것입니다.

Create React App + Storybook의 경우 config.js 에 다음을 추가하여 Storybook에 CSS 재설정을 적용했습니다.

import '!style-loader!css-loader!../src/reset.css';

누구나 postcss-scss에 대한 솔루션이 있습니까?

사용자 지정 웹팩 구성을 통해 스토리 북에 SCSS 상수 를 블로그 를 읽을 수 있습니다.

현재 구성 버그 https://github.com/storybookjs/storybook/issues/11052 및 해결 방법으로 작성한 블로그를 설명하는 결함이 있습니다.

도움이 되었기를 바랍니다!

main.js 가있는 설치의 경우 (예 : CreateReactApp 프로젝트에서 npx -p @storybook/cli sb init 실행) preview.js 를 형제로 추가 한 다음 다음을 수행합니다.

// .storybook/preview.js
require('!style-loader!css-loader!../src/css/tailwind-utility-classes.css')

이러한 로더 중 하나가 설치되지 않았다고 불평하는 경우 (CRA 프로젝트 인 경우 해당) 수동으로 설치하십시오 (예 : yarn add style-loader css-loader ).

upvoted / deprecated 솔루션이 실패 할 때 사람들이 솔루션을 위해 맨 아래로 이동할 수 있도록 스레드를 잠그십니까?

@garrettmaring 당신과 함께 시도 않았다 .storybook/preview.js 보다는 .storybook/config.js ?

내가 만들 때 styles.css 같은 디렉토리 내에서 파일을하고 그것을 가져 import './styles.css'; 내 안에 preview.js 파일, 내 동화가 갑자기 단지로드 상태에 붙어입니다 ... :(

그것을 해결하는 방법을 아십니까?

웹 구성 요소에 대한 open-wc 구성 과 함께 스토리 북을 사용하고 preview.js 및 main.js 파일이 .storybook 폴더에 있습니다.

@dcts 는 ./styles.css 가 Tailwind 유틸리티를 참조하거나, 사전 처리해야하는 일부 기능을 사용하거나, 다른 방식으로 독립 실행 형 파일로 "파손"되기 때문일 수 있습니다.

세 가지를해야했습니다.

1. 입력 CSS 파일을 만듭니다. 저에게는 Tailwind 설정에 필요한 모든 것을 가져 오는 css/tailwind.css 입니다.
2. 스토리 북을 실행할 때 먼저 해당 파일을 빌드하십시오. 저에게 이것은 PostCSS 명령이었습니다 postcss css/tailwind.css -o css/index.css
3. .storybook/preview.js (필요한 경우 해당 파일 생성)에 import '../css/index.css

Twin 을 사용하고 있으며 예상대로이 구성 요소를 사용할 수 있습니다.

import tw, { styled } from 'twin.macro'

const StyledReactionButton = styled.button`
  ${tw`bg-blue-400 bg-opacity-25`}
`

더 나은 해결책은 postcss 단계를 처리하도록 스토리 북 웹팩 구성을 편집하는 것입니다.

scss와 함께 Vue.js를 사용하고 있습니다. 내 문제는 preview.js에서 전역 scs를 가져올 때 내 크롬 devtolls가 매우 느리고 사용할 수 없다는 것입니다. 같은 문제가있는 사람이 있습니까? 대안이 있습니까? 각 스토리에서 글로벌 scs를 가져 오지 않으려 고합니다.

위의 솔루션은 어떤 방식으로 작동했지만 __from official docs__ 이 방법 은 전체 프로젝트에서 문제를 제거합니다.

간단히 말해, scss 로더를 설정하려면 Webpack 구성을 확장해야합니다.

공식 문서의 샘플 코드

// .storybook/main.js

const path = require('path');

// Export a function. Accept the base config as the only param.
module.exports = {
  webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // Make whatever fine-grained changes you need
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });

    // Return the altered config
    return config;
  },
};

용법

이제 .storybook/preview.js 에서 scss 파일을 어웨이로 가져올 수 있습니다.

// .storybook/preview.js

import "../src/styles/main.scss";

// ...

... 또한 구성 요소에서도 :

<!-- src/components/MyComponent.vue -->

<template>
  ...
</template>

<script>
// ...
</script>

<style lang="scss">
<strong i="18">@import</strong> "../styles/components/components.my-component";
</style>

preview.js 에서 상당한 규모의 SCSS 프로젝트를 가져 오면 프로젝트의 변경 사항에 대해 5 초 이상의 재 컴파일 시간이 발생하는 문제가 발생했습니다. 이것을 스토리로 옮기면 모든 것이 <1 초의 재 컴파일 시간으로 되돌아갑니다 ..

Gatsby 및 표준 scss 사전 설정 과 함께 Storybook을 사용하고 global.scss 파일을 preview.js 가져온 후 스타일이 선택되지만 global.scss 변수를 정의하고이를 구성 요소에서 사용하면 다음 오류가 발생합니다.

ERROR in ./src/stories/button.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/stories/button.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable: "$black".

global.scss 파일이 너무 늦게로드되는 것 같지만 올바르게 구성하는 방법을 모르겠습니다. preview.js 전역 스타일을 추가하는 것이 권장되는 방법이기 때문에 버그 일 수도 있습니다.

최신 정보

명령이 아닙니다. global.scss에 다음을 작성하면.

body {
    background-color: black;
}

Button.scss에 다음이 있습니다.

body {
  background-color:green;
}

배경색은 사실 녹색입니다. 이는 Buttons.scss가 Global.scss 후에로드되지만 변수는 여전히 선택되지 않음을 의미합니다.

해결책
이즈, 오늘 많이 배웠어요. 주된 문제는 sass 변수가 기본적으로 선언 된 파일에서만 정의된다는 것입니다. 파일간에 변수를 사용하려면 sass-modules를 사용해야합니다. 이전 방법은 @import 를 사용하는 것이었지만 새로운 선호되는 방법은 @use입니다. @use pathtomodule/global.scss button.scss 와 같은 모든 모듈을 시작합니다. 제 경우에는 preview.js 의 가져 오기가 중복됩니다.

또 다른 문제가있었습니다. @use 는 현재 dart sass에서만 지원됩니다. node-sass를 설치했습니다 ( npm i node-sass --save-dev ). dart-sass ( npm i dart-sass --save-dev )라는 패키지가 있지만 이전에 언급 한 사전 설정에 맞는 것은 아닙니다. Dart sass는 일반 sass가되었습니다 . npm i sass --save-dev 간단히 설치할 수 있습니다.

안녕하세요 @Piepongwong ,

나는 Gatsby를 사용하지 않지만 Vue에서 모든 mixin 및 변수 가져 오기를 _common.scss 라는 하나의 파일에 넣는 문제를 해결하고 다음과 같은 구성 요소로 가져옵니다.

<style lang="scss">
<strong i="9">@import</strong> 'path/to/styles/_common.scss';
<strong i="10">@import</strong> 'path/to/styles/components/_components.component.scss';
</style>

이런 식으로 나는 항상 내 믹스 인과 변수가 존재한다고 확신하지만 모든 구성 요소와 변수를 올바르게 추상화해야한다는 점을 알고 있습니다. 모범 사례를 보려면 inuitcss 를 참조하십시오.

도움이 되었기를 바랍니다.

안녕하세요 @omaracrystal 은 제가 한 방법입니다.
.storybook/config.js 파일에서 올바른 로더를 인라인으로 가져 오기를 추가하십시오.

import '!style-loader!css-loader!sass-loader!./scss-loader.scss';

그런 다음 scss-loader.scss 파일에서 필요한 모든 스타일을 추가 / 가져옵니다.

$font-path: '../projects/lib/src/theming/fonts/OpenSans/';

<strong i="15">@import</strong> '../projects/lib/src/theming/reset.scss';
<strong i="16">@import</strong> '../projects/lib/src/theming/main.scss';

html {
  font-family: $font-name;
  font-size: $font-size--small;
}

@kroeder 가 제안한 솔루션은 Angular 응용 프로그램의 구성 요소를 사용하는 한 작동하지만 라이브러리의 경우 angular.json 파일에 styles 속성을 추가 할 수 없습니다.

모두에게 효과가 있습니까? 내 편이 아닙니다 :(

나를 위해 :( 나는 next.js 및 reactstrap으로 시도했지만 내 스타일 폴더에서 app.scss를로드하지 않았습니다 : /

안녕하세요 @omaracrystal 은 제가 한 방법입니다.
.storybook/config.js 파일에서 올바른 로더를 인라인으로 가져 오기를 추가하십시오.

import '!style-loader!css-loader!sass-loader!./scss-loader.scss';

그런 다음 scss-loader.scss 파일에서 필요한 모든 스타일을 추가 / 가져옵니다.

$font-path: '../projects/lib/src/theming/fonts/OpenSans/';

<strong i="16">@import</strong> '../projects/lib/src/theming/reset.scss';
<strong i="17">@import</strong> '../projects/lib/src/theming/main.scss';

html {
  font-family: $font-name;
  font-size: $font-size--small;
}

@kroeder 가 제안한 솔루션은 Angular 응용 프로그램의 구성 요소를 사용하는 한 작동하지만 라이브러리의 경우 angular.json 파일에 styles 속성을 추가 할 수 없습니다.

모두에게 효과가 있습니까? 내 편이 아닙니다 :(

나를 위해 :( 나는 next.js 및 reactstrap으로 시도했지만 내 스타일 폴더에서 app.scss를로드하지 않았습니다 : /

@hayatbiralem 방식으로 시도하십시오-작동합니다.

이것은 최신 버전의 동화책 @storybook/[email protected] 에서 저에게 효과적이었습니다. 누군가에게 도움이되기를 바랍니다!

// .storybook/main.js
const path = require('path');

module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
    "../app/frontend/components/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    '@storybook/preset-scss'
  ],
  webpackFinal: async (config) => {
    // this sets the default path for modules
    config.resolve.modules = [
      ...(config.resolve.modules || []),
      path.resolve(__dirname, "../app/frontend"),
    ];

    config.module.rules.map(rule => {
      if (rule.test instanceof RegExp && rule.test.toString() === '/\\.s[ca]ss$/') {
        rule.use.push({
          loader: require.resolve('sass-resources-loader'),
          options: {
            resources: [
              path.resolve(__dirname, '../app/frontend/styles/base/_variables.scss')
            ]
          }
        })
      }
      return rule
    })
    return config;
  },
}