Storybook: Как использовать стили фреймворка CSS в сборнике рассказов

Созданный на 3 апр. 2016 · 35Комментарии · Источник: storybookjs/storybook

Предположим, что мое приложение основано на некоторой структуре CSS, такой как Semantic UI, Bootstrap или что-то в этом роде. Как я могу легко включить эти стили в сборник рассказов, чтобы мои компоненты отображались правильно?

compatibility with other tools question / support

Источник

croogie

👍11

Самый полезный комментарий

найдено в документации: https://storybook.js.org/configurations/default-config/#css -support

blairanderson 16 июн. 2017

👍32 ❤10 👎4 🎉3

Все 35 Комментарий

Да, именно так. Читайте здесь - https://github.com/kadirahq/react-storybook/blob/master/docs/setting-up-for-css.md

Это не то, что вам нужно, просто откройте это заново.

UPD 17.08.2017 (@hypnos)
https://storybook.js.org/configurations/add-custom-head-tags/

arunoda 3 апр. 2016

😕23 👎21

Ссылка не работает, и я не могу найти ее в файле текущего мастера.

andrioid 19 окт. 2016

👍33

Проверьте это: https://getstorybook.io/docs/configurations/custom-webpack-config

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

arunoda 19 окт. 2016

👎20 😕15

Благодарю. Более простой способ - добавить файл head.html в каталог ".storybook" с расширением элементы для Bootstrap или Semantic UI

UPD 17.08.2017 (@hypnos)
Теперь это preview_head.html

andrioid 19 окт. 2016

👍24 👎2

Спасибо, метод head.html работает отлично!

wmhafiz 14 нояб. 2016

Будет ли head.html лучшим способом решить эту проблему, если файл, который вы добавляете, не обслуживается через URL-адрес, а размещается локально? как это будет работать?

felipecocco 10 дек. 2016

👍6

Обе ссылки не работают.

kirkstrobeck 17 мая 2017

👍9

Извините за битые ссылки, это, к сожалению, результат нашей реструктуризации. Найти можно только с помощью поиска.

Что вам нужно / вам нужна помощь с @kirkstrobeck ? Вопрос довольно старый и закрытый.
Если у вас есть конкретная проблема, с которой мы можем вам помочь, дайте нам знать 👍.

ndelangen 17 мая 2017

Я приземлился здесь, пытаясь понять, как интегрировать React Storybook в реальное приложение, где все наши стили находятся в файлах scss в app/assets/stylesheets

sergiotapia 24 мая 2017

👍6

Вам нужно будет расширить нашу конфигурацию веб-пакета / предоставить свою собственную конфигурацию веб-пакета.

В нем вам нужно указать webpack, что делать с .scss -файлами. иначе, вам нужно добавить sass-loader .

Вероятно, у вас уже есть это приложение, и вы можете скопировать и вставить его конфигурацию webpack?

ndelangen 24 мая 2017

найдено в документации: https://storybook.js.org/configurations/default-config/#css -support

blairanderson 16 июн. 2017

👍32 ❤10 👎4 🎉3

@arunoda , можно ли удалить две приведенные выше ссылки с запутанным лицом, которое я отметил выше? сэкономьте время для других, кто войдет на эту страницу в будущем. Благодаря!

achenwei-chwy 16 авг. 2017

Возможно, достаточно запутанных реакций. Я тоже за них проголосовал.

kirkstrobeck 16 авг. 2017

Только что обновил комментарии с устаревшими ссылками

Hypnosphi 17 авг. 2017

👍2

Заголовочный файл для сборника рассказов называется preview-head.html Ссылка:
https://storybook.js.org/configurations/add-custom-head-tags/

LukasMac 24 авг. 2017

👍13 🎉1

В моем «основном» приложении мои глобальные стили определены в файле JS, который экспортирует строку шаблона, содержащую все глобальные правила CSS.
Есть ли способ добавить строку шаблона с определениями CSS в iframe, в котором отображаются истории?

РЕДАКТИРОВАТЬ:
Поскольку я использую компоненты в стиле реакции, я теперь просто использую их помощник injectGlobal .

flavordaaave 14 нояб. 2017

@flavordaaave Я думаю, вы захотите просто вставить стили в тег стиля из config.js

ndelangen 14 нояб. 2017

@ndelangen Пока что все возможности внедрения глобального стиля ( import './styles.css'; или через preview-head.html ) не позволяют мне вводить стили с динамическими параметрами.

Мои стили выглядят примерно так:

/* .storybook/config.js */

import theme from './theme'

export default `
html {
  font-family: Helvetica;
  background: ${theme.canvas_ground};
  ...
}
`

Итак, сейчас я использую помощник injectGlobal из react-styled-components как упоминалось в моем EDIT выше.

/* .storybook/config.js */
...
import { injectGlobal } from 'styled-components'
import styles from '../src/styles'

injectGlobal`${styles}`
...

flavordaaave 14 нояб. 2017

👍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 15 нояб. 2017

👍5

Всем привет!
Я пытаюсь связать свою таблицу стилей с Storybook, и вычеркиваю.

Я выполнил эти инструкции, чтобы импортировать свой файл 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 28 мар. 2018

Если вы получаете ошибки 404, потому что CSS не находится в CDN, вы можете передать дополнительный параметр для запуска Storybook со статической папкой и ссылаться на свои файлы как просто ./some.css . Запустите storybook -p 9001 -s ./a-static-folder и поместите свой css в эту папку.

nickytonline 29 мар. 2018

👍4

Спасибо за предложение, @nickytonline. К сожалению, это не сработало. У меня есть файлы в static/style.css и я выполнил команду storybook -p 9001 -s ./static . Это привело к storybook: command not found . Я запустил npm run storybook -p 9001 -s ./static который запустился, но все же привел к ошибке 404 в моей таблице стилей.

bradfrost 29 мар. 2018

@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 29 мар. 2018

👍8

@nickytonline Ага, у меня все было связано как <link rel="stylesheet" href="./styles.css" /> .

bradfrost 29 мар. 2018

@bradfrost меня <link /> . Он доступен здесь, https://github.com/nickytonline/for-brad

Вы можете увидеть здесь ссылку на таблицу стилей https://github.com/nickytonline/for-brad/blob/master/.storybook/preview-head.html#L1

nickytonline 3 апр. 2018

👍7 ❤2

@nickytonline Большое спасибо за демонстрационный проект! Я очень ценю это.

Проблема, с которой я все еще сталкиваюсь, отражена в моем исходном сообщении , которое заключается в использовании import для добавления стилей в проект. К сожалению, этот метод вызывает ошибки, если такие ресурсы, как шрифты, значки или фоновые изображения, не разрешаются. Я понимаю, что есть способы исправить это, но я думаю, что просто хочу связать таблицу стилей в заголовке моего документа старым способом.

bradfrost 8 апр. 2018

Извините, я плохо понимаю, что не усвоил все содержание вашего исходного сообщения . Это неплохой вариант, если вы хотите избежать

nickytonline 8 апр. 2018

Что вы можете сделать, так это создать «общедоступную» папку в корневой папке.
в папке 'public / semantic' вредитель содержимого 'node_modules / semantic-ui-css'.
в package.json => scripts => storybook => add '' -s ./public "
Последняя вещь!!! в вашем файле компонента .less выполните
теперь иконка должна работать плавно.

amos80m 8 янв. 2019

😕1

Для Storybook v5 и normalize.css "framework" достаточно просто добавить import "normalize.css"; внутрь .storybook/config.js файла.

jmarceli 6 мая 2019

👍11 🎉3

@jmarceli У меня работает, большое спасибо!

anton-paskanny 17 мая 2019

Это все еще жизнеспособный вариант с v6?

Для Storybook v5 и normalize.css "framework" достаточно просто добавить import "normalize.css"; внутрь .storybook/config.js файла.

snyderhaus 30 мар. 2020

@snyderhaus: да, хотя с config.js устарел, и мы настоятельно рекомендуем использовать вместо него preview.js . больше информации:

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#to -mainjs-configuration

shilman 31 мар. 2020

Я заходил в эту ветку много раз по многочисленным проектам! Так что это для меня, а также для справки кого-либо еще.

Это сработало для меня.

// 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 5 апр. 2020

👍11

Для тех, кто использует v6 +, решение с использованием config.js не будет работать.

Мне удалось заставить его работать так:

создать файл с именем preview.js в папке .storybook
импортировать внешний 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 12 авг. 2020

👍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