Sobrescrita que estilos

VTEX in your native language 🌎 Português
,
1

Estou me familiarizando com a VTEX ainda.

Estou tentando montar uma estrutura de pastas mais organizadas. Entretanto, estou percebendo que o layout não está sendo afetado e a classe bt-2 não está sendo chamada.

Resposta no console:

info: Duplicate entry for vtex.rich-text.css. Please, mind CSS rule overriding. vtex.builder-hub@0.296.0

A estrutura:

└── styles/
    ├── configs/
    ├── css/
    │       ├── footer/
    │       │      ├─ vtex.rich-text.css
    │       ├── global/
    │       │      ├─ vtex.rich-text.css

// footer/vtex.rich-text.css

.paragraph--title-footer {
  text-transform: uppercase;
}

.paragraph--security {
  margin: 2.87rem 0px 2.37rem;
}

// global/vtex.rich-text.css

.paragraph--bt-2 {
  margin-bottom: 2rem;
  color: white;
}

.paragraph--no-spc {
  margin: 0px;
}
1 Like
2

Olá Matheus, tudo bem?

Utilizar pastas para organizar sua estrutura de css não deveria afetar o layout ao linkar seu code.

Existem diversas situações que podem estar causando isso, confira:

  1. Se já existe estilização para .paragraph{ }
  2. Seu bloco rich-text está com o blockClass com mais de uma classe (ex: bt-2 e security)
  3. Se você estiver utilizando heading ( # ) no bloco, utilizar o .paragraph–bt-2, pode não estiliza-lo, então precisará utilizar o .heading–bt-2
1 Like
3

Olá @MatheusRoberson, tudo joia?

Nestes casos acho que o ideal é organizar a estilização usando os partials do Sass.

// rich-text/_footer.scss
.paragraph--title-footer {
  text-transform: uppercase;
}

.paragraph--security {
  margin: 2.87rem 0px 2.37rem;
}

// rich-text/_global.scss
.paragraph--bt-2 {
  margin-bottom: 2rem;
  color: white;
}

.paragraph--no-spc {
  margin: 0px;
}

// rich-text/_index.scss
@import 'footer', 'global';

// vtex.rich-text.scss
@import 'rich-text';

Então o Sass vai gerar um único arquivo vtex.rich-text.css. Segue a documentação.

1 Like