Storybook: Как мне включить глобальные стили (scss) один раз для всех фреймов Storybook?

Попробуйте добавить файл 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, но для библиотек вы не можете добавить свойство styles в файл angular.json

Попробуйте добавить файл 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, но для библиотек вы не можете добавить свойство styles в файл angular.json

Это работает для всех? Не работает моя сторона :(

@ozanmanav вы пробовали импортировать его в .storybook/config.js ?

PS: потому что для меня это работает, но я импортирую только файл .css без веб-загрузчиков

Похоже, это больше не работает с файловой структурой main.js в Storybook v5.3.

@garrettmaring вы пробовали использовать .storybook/preview.js вместо .storybook/config.js ?

@garrettmaring
Наконец-то я заставил его работать для файлов .css используя import '!style-loader!css-loader!./main.css' .
Сначала я попытался поиграть с конфигурацией webpack, но удалил все свои собственные правила и встроил их, как указано выше. Очевидно npm устанавливает загрузчики.

@shilman да, это сработало 👍 Совершенно ясно, когда я увидел документацию по нему. В основной документации Storybook может быть место для более ясных документов. Я нашел эту статью ясной.

@garrettmaring Вы хотите отправить PR, чтобы помочь улучшить документы?

@garrettmaring
Наконец-то я заставил его работать для файлов .css используя import '!style-loader!css-loader!./main.css' .
Сначала я попытался поиграть с конфигурацией webpack, но удалил все свои собственные правила и встроил их, как указано выше. Очевидно npm устанавливает загрузчики.

Просто к вашему сведению, что я только что понял, этот подход творит чудеса при локальном обслуживании сборника рассказов, но он не работает (из того, что я видел) с сборочным сборником рассказов.

Мое решение
Добавьте <link rel="stylesheet" href="./your-global-styles.css" /> в файл preview-head.html. Затем используйте флаг -s в каталоге your-global-styles.css , скопируйте стили в каталог сборки сборника рассказов. Теперь iframe.html «должен» ссылаться на your-global-styles.css из того же каталога.

Единственная проблема с этим заключается в том, что при локальном запуске консоль браузера сообщит, что не может найти localhost/your-global-styles.css но все равно работает по назначению.

Если у кого-то есть лучший способ подойти к этому или знает правильное решение, дайте мне знать :)

мы обслуживаем scss-файлы в сборнике рассказов, используя следующее:

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

Это отлично работает для нас

@blemaire Где вы используете эту строчку?

@blemaire Где вы используете эту строчку?

@lopis просто создайте preview.js в папке .storybook и поместите в нее эту строку

Всем спасибо. Подтверждая, что

• добавление файла scss в .storybook (или в любое другое место, куда вы хотите его поместить).
• Создание .storybook/preview.js
• добавление import '!style-loader!css-loader!sass-loader!./styles.scss'; в каталог preview.js
• добавление "css-loader" как devDependency к package.json

у нас работает; Storybook icw библиотека Angular 9 (поэтому нет возможности добавить ее в файл angular.json )

В настройке на основе nextjs простая строка от import "../styles/main.css"; (как в основном приложении) до .storybook/preview.js правильно добавляет стили.

Вышеупомянутые решения работают, если все ваши пути являются относительными ../../src/main.scss но в моем текущем проекте используется глобальный / псевдоним SCSS.

Моя конфигурация main.js webpack для Storybook может компилировать псевдоним. Но когда я пытаюсь импортировать глобальный / псевдоним SCSS в свой preview.js он не может разрешить пути.

Не уверен, куда идти.

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

Я пробовал это, но получаю ошибку. Мне нужен Storybook, чтобы знать о моих глобальных переменных CSS и миксинах.

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? Применяются ли они вообще в Storybook? Я пробовал это, но все равно получаю 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, но для библиотек вы не можете добавить свойство styles в файл angular.json

Это работает для всех? Не работает моя сторона :(

Нет. Мне тоже не помогает. Теперь я получаю эту ошибку:

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

Опишите ошибку
Я пробовал несколько способов включить глобальные стили (scss) один раз для всех фреймов Storybook, но безуспешно. Кажется, нет четкого и лаконичного способа сделать это.

Воспроизводить
Попытки:

1. 
   
   • Импортируйте глобальные стили в каждый компонент.
   
   
   • Результаты: стили применяются, но несколько стилей global.scss повторяются {story #} x раз.
   
   
2. 
   
   • Следуйте инструкциям здесь для настраиваемой конфигурации веб-пакета: https://storybook.js.org/docs/configurations/custom-webpack-config/
   
   
   • Результаты: Похоже, это только говорит Storybook читать scss, на самом деле не создает глобальный файл, который применяется ко всем историям
   
   
3. 
   
   • В одном месте рекомендуют создать декоратор для Storybook и таким образом применить «глобальный» CSS.
   
   
   • Результат: не работает для того, что я пытаюсь сделать (несколько стилей, миксинов, переменных и т. Д.). Это работает только для небольших изменений CSS.
   
   
4. 
   
   • В конфигурации под .storybook require ('../ libs / storybook / global-styles.scss'); в функции loadStories
   
   
   • Результат: ничего
   
   
5. 
   
   • Пытался импортировать глобальные стили в Storybook index.ts
   
   
   • Результат: ничего
   
   

6. • Пытался добавить глобальные стили через файл angular.json

     • Результат: ничего

Ожидаемое поведение
Я бы ожидал, что смогу импортировать глобальные (scss) файлы в одном месте, чтобы их можно было применить к каждому iframe истории. Мог ли быть параметр конфигурации, о котором я не знаю?

Система:

• ОС: MacOS
• Устройство: Macbook Pro 2015
• Браузер: Chrome
• Фреймворк: угловой
• Аддоны: - [в центре аддона, аддон-область просмотра, аддон-информация]
• Версия: [^ 5.0.1]

Дополнительный контекст
Я надеюсь, что мне не хватает какой-то конфигурации в сборнике рассказов, которая упростила бы эту проблему.

Вы когда-нибудь решали эту проблему? Если да, то каково было решение? Благодаря!

@caseytrombley Решение - добавить import '!style-loader!css-loader!sass-loader!./styles.scss'; в файл preview.js.

Для Create React App + Storybook я добавил следующее в config.js чтобы мой сброс CSS применился к Storybook.

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

У кого-нибудь есть решение, работающее для postcss-scss?

Вы можете прочитать блог, который я написал, в котором точно говорится о реализации констант SCSS для вашего сборника рассказов через настраиваемую конфигурацию webpack.

Есть дефект, который я зарегистрировал, объясняя текущую ошибку конфигурации https://github.com/storybookjs/storybook/issues/11052 и блог, который я написал в качестве обходного пути.

Надеюсь это поможет!

Для установок с main.js (т.е. вы запустили npx -p @storybook/cli sb init в проекте CreateReactApp) просто добавьте preview.js в качестве родственного брата, а затем сделайте следующее:

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

Если он жалуется, что один из этих загрузчиков не установлен (они должны быть установлены, если это проект CRA), просто установите их вручную (например, yarn add style-loader css-loader ).

Заблокировать ветку, чтобы люди могли просто перейти к нижней части для решения, когда решение, за которое проголосовали / устарело, дает сбой?

@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. Для меня это 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`}
`

Я думаю, что лучшим решением было бы отредактировать конфигурацию webpack сборника рассказов для обработки шага postcss.

Я использую Vue.js с scss. Моя проблема в том, что при импорте глобального scss в preview.js мои chrome devtolls работают очень медленно и непригодны для использования. У кого-нибудь такая же проблема? Есть альтернативы? Я стараюсь не импортировать глобальный scss в каждый из своих рассказов.

Вышеупомянутые решения работали определенным образом, но этот метод __ из официальных документов__ устраняет проблему во всем проекте.

Короче говоря, нам нужно расширить конфигурацию Webpack, чтобы установить загрузчики scss.

Пример кода из официальных документов

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

Я столкнулся с проблемой, когда импорт большого проекта SCSS из preview.js вызывает 5+ секунд перекомпиляции при любом изменении чего-либо в проекте. Перенос этого в историю каким-то образом сокращает время перекомпиляции до <1 с ..

Я использую Storybook с Gatsby и стандартными предустановками 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-модули. Старый способ заключался в использовании @import , но новый предпочтительный способ - @use. Я начинаю каждый модуль вроде button.scss с @use pathtomodule/global.scss . В моем случае это делает импорт в preview.js избыточным.

Была еще одна загвоздка. @use в настоящее время поддерживается только dart sass. У меня был установлен node-sass ( npm i node-sass --save-dev ). Существует пакет под названием dart-sass ( npm i dart-sass --save-dev ), но он не подходит для ранее упомянутых пресетов. Dart sass превратился в обычную дерзость . Вы можете просто установить его с помощью npm i sass --save-dev .

Привет @Piepongwong!

Я не использую Gatsby, но в Vue я решил эту проблему, поместив весь импорт миксинов и переменных в один файл с именем _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, но для библиотек вы не можете добавить свойство styles в файл angular.json

Это работает для всех? Не работает моя сторона :(

не для меня :( Я пробовал использовать next.js и responsestrap, но он не загрузил 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, но для библиотек вы не можете добавить свойство styles в файл angular.json

Это работает для всех? Не работает моя сторона :(

не для меня :( Я пробовал использовать next.js и responsestrap, но он не загрузил 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;
  },
}