Storybook: すべてのStorybookiframeにグローバルスタイル（scss）を1回含めるにはどうすればよいですか？

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日後にクローズされます。 ありがとう！

ねえ、また私だ！ 代わりに、メンテナが現在の開発ロードマップに集中できるように、この問題を解決します。 上記の問題が引き続き懸念される場合は、新しいチケットを開いて、この古いチケットについて言及してください。 Storybookをご利用いただきありがとうございます。

こんにちは@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インポートしてみましたか？

PS：私にとっては機能しますが、webpack-loadersなしで.cssファイルだけをインポートするためです

これは、Storybookv5.3のmain.jsファイル構造を使用して機能しなくなったようです。

@garrettmaringあなたがしようとしなかった.storybook/preview.jsではなく.storybook/config.js ？

@garrettmaring
私はついにimport '!style-loader!css-loader!./main.css'を使用して.cssファイルで動作するようになりました。
最初はwebpackconfigをいじってみましたが、カスタムルールをすべて削除し、上記のようにインライン化しました。 明らかに、npmはローダーをインストールします。

@shilmanはい、この記事は明確だと思いました。

@garrettmaringドキュメントの改善に役立つPRを提出することをお

@garrettmaring
私はついにimport '!style-loader!css-loader!./main.css'を使用して.cssファイルで動作するようになりました。
最初はwebpackconfigをいじってみましたが、カスタムルールをすべて削除し、上記のようにインライン化しました。 明らかに、npmはローダーをインストールします。

私がちょうど理解したほんの一部の参考までに、このアプローチはストーリーブックをローカルで提供するときに不思議に機能しますが、ビルドストーリーブックでは（私が見たものから）機能しません。

私の解決策
<link rel="stylesheet" href="./your-global-styles.css" />をpreview-head.htmlに追加します。 次に、 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を作成し、その行をその中に入れます。

みんな、ありがとう。 それを確認する

• scssファイルを.storybook （または配置したい場所）に追加します。
• .storybook/preview.js作成する
• preview.jsディレクトリにimport '!style-loader!css-loader!sass-loader!./styles.scss';を追加する
• package.json devDependencyとして"css-loader"を追加します

私たちのために働きます。 storybook icw Angular 9ライブラリ（したがって、 angular.jsonファイルに追加するオプションはありません）

nextjsベースのセットアップでは、（メインアプリのように） import "../styles/main.css";から.storybook/preview.js単純な行で、スタイルが正しく追加されます。

上記のソリューションは、すべてのパスが相対的な../../src/main.scss場合に機能しますが、現在のプロジェクトではSCSSグローバル/エイリアスを使用しています。

Storybookのmain.js webpack構成で、エイリアスをコンパイルできます。 しかし、グローバル/エイリアス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

バグを説明する
私はすべてのStorybookIframeに対してグローバルスタイル（scss）を組み込む複数の方法を一度試しましたが、失敗しました。 これを行うための明確で簡潔な方法はないようです。

再現するには
試み：

1. 
   
   • 各コンポーネント内のグローバルスタイルをインポートします。
   
   
   • 結果：スタイルが適用されますが、複数のglobal.scssスタイルが{story＃} x回繰り返されます。
   
   
2. 
   
   • カスタムWebpack構成については、こちらの指示に従ってください：
   
   
   • 結果：これはStorybookにscssを読み取るように指示するだけであり、実際にはすべてのストーリーに適用されるグローバルファイルを設定していないようです。
   
   
3. 
   
   • ある場所では、Storybookのデコレータを作成し、その方法で「グローバル」CSSを適用することをお勧めします。
   
   
   • 結果：私がやろうとしていること（複数のスタイル、ミックスイン、変数など）では機能しませんこれは小さなCSSの変更に対してのみ機能します
   
   
4. 
   
   • .storybook require（ '../ libs / storybook / global-styles.scss'）;の下の設定で loadStories関数内
   
   
   • 結果：何もありません
   
   
5. 
   
   • Storybookindex.ts内のグローバルスタイルをインポートしようとしました
   
   
   • 結果：何もありません
   
   

6. • angle.jsonファイルを介してグローバルスタイルを追加しようとしました

     • 結果：何もありません

予想される行動
すべてのストーリーのIframeに適用できるように、グローバル（scss）ファイルを1か所にインポートできると期待しています。 私が知らない設定設定があるでしょうか？

システム：

• OS：MacOS
• デバイス：Macbook Pro 2015
• ブラウザ：Chrome
• フレームワーク：Angular
• アドオン：-[アドオン中心、アドオンビューポート、アドオン情報]
• バージョン：[^ 5.0.1]

追加のコンテキスト
これを簡単に解決できるストーリーブック内の構成が欠落していることを願っています。

これを解決したことはありますか？ もしそうなら、解決策は何でしたか？ ありがとう！

@caseytrombley解決策は、preview.jsにimport '!style-loader!css-loader!sass-loader!./styles.scss';を追加することです。

Create React App + Storybookの場合、CSSリセットをStorybookに適用するために、以下をconfig.jsに追加しました。

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

postcss-scssで機能するソリューションを持っている人はいますか？

カスタムwebpackconfigを介してストーリーブックに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')

それらのローダーの1つがインストールされていないと文句を言う場合（CRAプロジェクトの場合はインストールされているはずです）、手動でインストールします（つまり、 yarn add style-loader css-loader ）。

スレッドをロックして、賛成/非推奨のソリューションが失敗したときに、人々がソリューションのために一番下にジャンプできるようにしますか？

@garrettmaringあなたがしようとしなかった.storybook/preview.jsではなく.storybook/config.js ？

私が作成した場合styles.cssと同じディレクトリ内のファイルをし、それをインポートimport './styles.css';私の内側のpreview.jsファイル、私の物語は突然ちょうど負荷状態で立ち往生している... :(

それを解決する方法はありますか？

私はWebコンポーネントのopen-wc構成でストーリーブックを使用して.storybookフォルダー内にpreview.jsとmain.jsファイルがあります。

@dctsは、 ./styles.cssがTailwindユーティリティを参照しているか、前処理が必要ないくつかの機能を使用しているか、または他の方法でスタンドアロンファイルとして「壊れている」ことが原因である可能性があります。

私は3つのことをする必要がありました：

1. 入力cssファイルを作成します。 私にとって、これはcss/tailwind.cssで、Tailwindのセットアップに必要なものをすべてインポートします。
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ステップを処理するようにストーリーブックのwebpack構成を編集することだと思います。

私はscssでVue.jsを使用しています。 私の問題は、preview.jsにグローバルscssをインポートするとき、私のchrome devtollsが非常に遅く、使用できないことです。 同じ問題を抱えている人はいますか？ 代替案はありますか？ 私は自分のストーリーのそれぞれにグローバルscssをインポートしないようにしています。

上記の解決策はある意味で機能しましたが、この方法は__公式ドキュメントから__プロジェクト全体の問題を排除します。

つまり、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;
  },
};

使用法

これで、scssファイルを.storybook/preview.js離れた場所としてインポートできます。

// .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秒未満の再コンパイル時間に戻ります。

私はギャツビーと標準のscssプリセットでストーリーブックを使用しています。 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です。 button.scssようなすべてのモジュールを@use pathtomodule/global.scssます。 私の場合、これによりpreview.jsのインポートが冗長になります。

別のキャッチがありました。 @useは現在、 npm i node-sass --save-dev ）。 dart-sass （ npm i dart-sass --save-dev ）というパッケージがありますが、これは前述のプリセットの正しいパッケージではありません。 ダーツサスはレギュラーサスになりました。 npm i sass --save-dev簡単にインストールできます。

こんにちは@Piepongwong 、

私はGatsbyを使用していませんが、Vueで、すべてのミックスインと変数のインポートを_common.scssという名前の1つのファイルに入れて、次のようなコンポーネントにインポートするという問題を解決しました。

<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;
  },
}