Theme Bug: Macros between multiple css files

Developer Support CMS Development
1

Hi, I have the project organized like so:

📂 CSS
|__📂 MACROS
     |__📄 macros.css
|__📂 TYPOGRAPHY
     |__📄 types.css
|__📄 THEME.CSS

Inside the theme.css file, I load all macros:

import .... macros.cssimport .... typhograpy.css

the problem is that inside the file typography.css the macros won’t work.

This works with HTML files, I can import a macro in the HEADER of the HTML file and all imported files work with the same macros.

In CSS I need to import the macros in all CSS files. This is a pain.

EDIT: also tried include, none work

2

Hey @igcorreia

Thank you for the information provided.I’ll tag a few experts that can share their experience with you.

Hey @krishangtechn @david_eic @Chris-M any thoughts you would like to share with @igcorreia?

Thanks

Sharon

3

Hi @igcorreia,

@all - corrrect me if i’m wrong, but as far as i know, this isn’t possible with basic css.

The @import statement will drop all non css statements such as variables and macros.

You will need to include these on every css file.

If you code locally:

There is also the option to switch to SCSS / Sass which has simulare statements.

In SCSS/Sass you have to compile the files, which compile your macros and variable to basic css.

- Chris

4

macros have to be added directly to the css file calling the macro. So you would need to import macros.css into typhograpy.css.

5

Yep, each CSS file that needs to use the macro, needs to import them.