Overriding styles

VTEX in your native language 🌎 Portuguese
,
1

I’m still getting familiar with VTEX.

I’m trying to set up a more organized folder structure. However, I’m noticing that the layout isn’t being affected and the bt-2 class isn’t being applied.

Console response:

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

The structure:

└── 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;
}
2

Hi Matheus, how are you?

Using folders to organize your CSS structure shouldn’t affect the layout when linking your code.

There are several situations that could be causing this, check the following:

  1. If there is already styling for .paragraph{ }
  2. Your rich-text block has a blockClass with more than one class (e.g.: bt-2 and security)
  3. If you’re using a heading ( # ) in the block, using .paragraph--bt-2 may not style it, so you’ll need to use .heading--bt-2
3

Hey @MatheusRoberson, how’s it going?

In these cases, I think the ideal approach is to organize the styling using Sass partials.

// 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';

Sass will then generate a single vtex.rich-text.css file. Check out the documentation.