Storybook: Como posso usar estilos de estrutura CSS dentro de um livro de histórias
Digamos que meu aplicativo esteja baseado em alguma estrutura CSS como Semantic UI, Bootstrap ou algo parecido. Como posso incorporar facilmente esses estilos dentro de um livro de histórias para que meus componentes sejam exibidos corretamente?
croogie
Todos 35 comentários
Sim, ele é. Leia aqui - https://github.com/kadirahq/react-storybook/blob/master/docs/setting-up-for-css.md
Não é disso que você precisa, apenas reabra.
UPD 17/08/2017 (@hypnos)
https://storybook.js.org/configurations/add-custom-head-tags/
arunoda
em 3 abr. 2016
O link está quebrado e não consigo encontrá-lo no arquivo do mestre atual.
andrioid
em 19 out. 2016
Verifique isso: https://getstorybook.io/docs/configurations/custom-webpack-config
UPD 17/08/2017 (@hypnos)
https://storybook.js.org/configurations/custom-webpack-config/
arunoda
em 19 out. 2016
Obrigado. Uma maneira mais fácil era adicionar um arquivo head.html no diretório ".storybook" com o elementos para Bootstrap ou IU semântica
UPD 17/08/2017 (@hypnos)
Agora é preview_head.html
andrioid
em 19 out. 2016
Obrigado, o método head.html funciona perfeitamente!
wmhafiz
em 14 nov. 2016
Head.html também seria a melhor maneira de fazer isso se o arquivo que você está adicionando não for veiculado por meio de um URL, mas sim hospedado localmente? como isso funcionaria?
felipecocco
em 10 dez. 2016
Ambos os links estão quebrados.
kirkstrobeck
em 17 mai. 2017
Desculpem os links quebrados, infelizmente este é o resultado da nossa reestruturação, A única forma de encontrar é através da pesquisa.
O que você está procurando / precisa de ajuda com @kirkstrobeck ? Este problema é bastante antigo e encerrado.
Se você tiver um problema específico com o qual possamos ajudá-lo, informe-nos 👍.
ndelangen
em 17 mai. 2017
Eu cheguei aqui tentando descobrir como integrar o React Storybook em um aplicativo real onde todos os nossos estilos estão em arquivos scss em app/assets/stylesheets
sergiotapia
em 24 mai. 2017
Você precisará estender a configuração do nosso webpack / fornecer sua própria configuração personalizada do webpack.
Nele você precisará dizer ao webpack o que fazer com os .scss -files. aka, você precisa adicionar sass-loader .
Provavelmente você já tem isso configurado para seu aplicativo e pode principalmente copiar e colar da configuração do webpack?
ndelangen
em 24 mai. 2017
encontrado na documentação: https://storybook.js.org/configurations/default-config/#css -support
blairanderson
em 16 jun. 2017
@arunoda seria possível remover acima dois links que confundiram o rosto que marquei acima? economize tempo para outras pessoas que entrarem nesta página no futuro. Obrigado!
achenwei-chwy
em 16 ago. 2017
As reações confusas são provavelmente suficientes. Eu também votei neles.
kirkstrobeck
em 16 ago. 2017
Acabei de atualizar os comentários com links desatualizados
Hypnosphi
em 17 ago. 2017
O arquivo de cabeçalho do livro de histórias é denominado preview-head.html Referência:
https://storybook.js.org/configurations/add-custom-head-tags/
LukasMac
em 24 ago. 2017
Em meu aplicativo "principal", meus estilos globais são definidos em um arquivo JS que exporta uma string de modelo contendo todas as regras CSS globais.
Existe uma maneira de adicionar uma string de modelo com definições CSS ao iframe onde as histórias são renderizadas?
EDITAR:
Como estou usando componentes com estilo de reação, agora estou apenas usando seu ajudante injectGlobal .
flavordaaave
em 14 nov. 2017
@flavordaaave Acho que você vai querer usar apenas injetar os estilos em uma tag de estilo de config.js
ndelangen
em 14 nov. 2017
@ndelangen Até agora, todas as possibilidades de injetar estilo global ( import './styles.css'; ou via preview-head.html ) não me permitem injetar estilos com parâmetros dinâmicos.
Meus estilos são mais ou menos assim:
/* .storybook/config.js */
import theme from './theme'
export default `
html {
font-family: Helvetica;
background: ${theme.canvas_ground};
...
}
`
Portanto, por enquanto, estou usando o ajudante injectGlobal de react-styled-components conforme mencionado na edição acima.
/* .storybook/config.js */
...
import { injectGlobal } from 'styled-components'
import styles from '../src/styles'
injectGlobal`${styles}`
...
você pode obter um resultado semelhante com este:
// 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)
Olá!
Estou tentando vincular minha folha de estilo ao Storybook e estou eliminando.
Segui estas instruções para importar meu arquivo CSS (que reside em static/style.css na raiz do meu projeto) com esta linha: import '../static/style.css'; . Isso resultou em um erro com r
Error: Can't resolve '../i/link.svg' in [path]
Não quero ter que passar por todo esse rigamarole para reconciliar todos os recursos referenciados externamente em minha folha de estilo, então pensei em tentar uma maneira diferente.
Eu adicionei preview-head.html por esses documentos , vinculando minha folha de estilo assim:
<link rel="stylesheet" href="./static/style.css" />
No entanto, isso resulta em um erro 404 para o recurso. _Acho_ que pode ser apenas um problema de caminho, mas não consigo encontrar qual caminho devo usar em relação a onde o Storybook está sendo executado. Alguma ideia?
bradfrost
em 28 mar. 2018
Se você está obtendo 404s porque seu CSS não está em um CDN, você pode passar um parâmetro extra para executar o Storybook com uma pasta estática e referenciar seus arquivos como apenas ./some.css . Execute storybook -p 9001 -s ./a-static-folder e coloque seu css nessa pasta.
nickytonline
em 29 mar. 2018
Obrigado pela sugestão, @nickytonline. Infelizmente, isso não pareceu funcionar. Tenho meus arquivos em static/style.css e executei o comando storybook -p 9001 -s ./static . Isso resultou em storybook: command not found . Executei npm run storybook -p 9001 -s ./static , mas ainda resultou em um erro 404 em minha folha de estilo.
bradfrost
em 29 mar. 2018
@bradfrost , apenas para esclarecimento, quando você executa npm run storybook -p 9001 -s ./static , ./static age como / em um livro de histórias, então se seu arquivo está em static/styles.css em seu projeto, seu link seria <link rel="stylesheet" href="./styles.css" /> not <link rel="stylesheet" href="./static/styles.css" />
nickytonline
em 29 mar. 2018
@nickytonline Sim, eu tinha coisas relacionadas como <link rel="stylesheet" href="./styles.css" /> .
bradfrost
em 29 mar. 2018
@bradfrost, isso estava me incomodando, pois não estava funcionando para você, então eu crio um <link /> . Está disponível aqui, https://github.com/nickytonline/for-brad
Você pode ver a folha de estilo sendo referenciada aqui, https://github.com/nickytonline/for-brad/blob/master/.storybook/preview-head.html#L1
nickytonline
em 3 abr. 2018
@nickytonline Muito obrigado pelo projeto demo! Eu realmente gostei disso.
O problema que ainda estou enfrentando se reflete em minha postagem original , que é o uso de import para inserir os estilos no projeto. Infelizmente, esse método gera erros se ativos como fontes, ícones ou imagens de fundo não são resolvidos. Sei que há maneiras de remediar isso, mas acho que estou apenas procurando vincular uma folha de estilo no cabeçalho do meu documento da velha maneira.
bradfrost
em 8 abr. 2018
Desculpe, minha má por não absorver todo o conteúdo de sua postagem original . Isso é muito difícil se você quiser evitar o
nickytonline
em 8 abr. 2018
O que você pode fazer é criar uma pasta 'pública' na pasta raiz.
na pasta 'public / semantic' praga o conteúdo de 'node_modules / semantic-ui-css'.
em package.json => scripts => storybook => adicionar '' -s ./public "
última coisa!!! em seu arquivo .less do componente, faça @import '/semantic/semantic.min.css';
agora o ícone deve funcionar sem problemas.
amos80m
em 8 jan. 2019
Para Storybook v5 e normalize.css "framework", basta adicionar import "normalize.css"; dentro do arquivo .storybook/config.js .
jmarceli
em 6 mai. 2019
@jmarceli Funciona para mim, muito obrigado!
anton-paskanny
em 17 mai. 2019
Esta ainda é uma opção viável com a v6?
Para Storybook v5 e
normalize.css"framework", basta adicionarimport "normalize.css";dentro do arquivo.storybook/config.js.
snyderhaus
em 30 mar. 2020
@snyderhaus sim, embora desde 5.3 config.js tenha sido descontinuado e recomendamos fortemente o uso de preview.js lugar. mais informações:
https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#to -mainjs-configuration
shilman
em 31 mar. 2020
Eu vim para este tópico inúmeras vezes para vários projetos! Portanto, isso é para minha própria referência, assim como para qualquer outra pessoa.
Isso funcionou para mim.
// 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';
meu style.scss está substituindo o tema de bootstrap padrão usando variáveis sass
Consegui usar a configuração do webpack padrão de storybooks e apenas fazer referência às folhas de estilo, além disso, usando a sintaxe do carregador embutido para meus arquivos sass , conforme mostrado nos documentos .
"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
em 5 abr. 2020
Para qualquer pessoa usando v6 +, a solução usando config.js não funcionará.
Eu consegui fazer funcionar assim:
- crie um arquivo chamado
preview.jsna pasta.storybook - importe o css externo. No meu caso, eles eram arquivos scss, então eu os importei assim:
// .storybook/preview.js
import '!style-loader!css-loader!sass-loader!@company/framework/src/styles.sass'
import '!style-loader!css-loader!sass-loader!./cssoverrides.sass'
A segunda importação foi adicionada para substituir alguns estilos globais padrão.
Minha estrutura de pastas:
.storybook
│ cssoverrides.sass
│ main.js
│ preview.js
Pacotes usados:
"@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
em 12 ago. 2020
O que funcionou para mim foi importar bootstrap em ./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
em 24 ago. 2020
Questões relacionadas
levithomason
·
3Comentários
alexanbj
·
3Comentários
wahengchang
·
3Comentários
oriSomething
·
3Comentários
tirli
·
3Comentários
Comentários muito úteis
encontrado na documentação: https://storybook.js.org/configurations/default-config/#css -support