Novo repositório não importa arquivos CSS

[guycanella]

Boa tarde pessoal,

criamos um novo repositório utilizando o vtex-apps/react-app-template que ainda não foi publicado mas estamos linkando com o store-theme da loja para refletir na WS e podermos fazer as modificações. Entretanto, esse novo repo não está importando os arquivos CSS, ou seja, está sem a estilização. Tem alguma configuração extra que precise fazer no app?

Desde já obrigado!

[andremiani]

Oi @guycanella, tudo joia?

Tá carregando o builder styles no manifest?

"styles": "2.x"

When building your app, the Styles Builder reads the styles/styles.json file and uses a Tachyons generator to properly produce your store’s CSS.

Builders

Abraços!

[guycanella]

Fala @andremiani ! tudo certinho!
cara, nós não estamos usando Tachyons estamos tentando usar o cssHandles então nem tem o builder do styles no projeto. Eu vi outros projetos que usam o cssHandles também e eles não tem esse builder
não sei se seria esse o problema. Já trabalhou com algum projeto onde usavam o cssHandles?

[andremiani]

Fala mister! Tudo joia?

Para carregar o CSS Handles, basicamente

1. Carregue a dependencia necessária no manifest.json

  "dependencies": {
    "vtex.css-handles": "0.x"
  },

2. Importe o hook useCssHandles para o componente

import {useCssHandles} from 'vtex.css-handles'

3. Defina os handles necessários

const CSS_HANDLES: string[] = ['headline']
const handles = useCssHandles(CSS_HANDLES)

Observação: como o useCssHandles é um hook, precisa ser chamado dentro do corpo da função do componente, senão o app link tudo normal, mas não funcionará gerará um erro no console.

4. Por último aplique o CSS handle para os elementos desejados:

  return <div className={`${handles.headline}`}>
    Hey, {name}
  </div>

Código final:

import React from 'react'
import {useCssHandles} from 'vtex.css-handles'


type Props = {
  name: string
}

function Greeting({ name }: Props) {

  const CSS_HANDLES: string[] = ['headline']
  const handles = useCssHandles(CSS_HANDLES)

  return <div className={`${handles.headline}`}>
    Hey, {name}
  </div>
}

export default Greeting

Testei aqui e funcionou beleza

[guycanella]

Fala André! Bom dia!

Então, eu consegui resolver aqui mas a questão na verdade era outra.

Eu tenho 2 apps aqui: o app A e o app B. Esse componente que eu estava tentando estilizar ele estava no app A e eu estou usando ele no app B. Entretanto, existem duas maneiras da gente chamar um componente do app A dentro do app B: como componente mesmo ou como bloco e é ai que entra a questão.

O cssHandles constrói as classes de acordo com o vendor e o name do app, só que quando eu chamo o componente dentro do app B como “componente”, por mais que eu tenha utilizado o cssHandles dentro do app A ele contrói as classes usando o vendor e o name do app B. Para eu utilizar o cssHandles e fazer a construção das classes da maneira correta, eu tenho que importar o componente para o app B como “bloco”.

Então nesse caso existem 2 soluções: construo o componente dentro do app A com cssHandles e chamo ele dentro do app B como bloco, ou contruo ele dentro do app A como componente mesmo utilizando CSS modules ou SCSS mesmo e chamo ele dentro do app B como componente. Ai funcionou!

Então cara, muito obrigado pelo tempo e esforça ai em tentar ajudar!