Importing custom css files in the global.css not working

Question:
How to import custom css files in the global.css?

Product:
Wix Studio Editor

What are you trying to achieve:
I am trying to separate out my variables into a different css file (named variables.css) which is placed in the exact same folder as the global.css file. I imported the file into global.css using
@import url('.\variables.css')
But on the editor, I am not able to see the variables.css in the CSS section of the site code. And global.css cannot access any of the variables defined in variables.css

What have you already tried:
I have tried

  • placing the variables.css in the root of src and the public folder.
  • tried hosting the variables.css file in a public repository and importing via complete url
    nothing worked

Additional information:
When I define the same variables in the global.css file itself it works fine. Does importing not work in Wix CSS correctly?

Hi, @Mugdha_Basak !!

I’m also somewhat interested in this topic. :innocent: At this point, there might be some limitations in place that prevent such operations on global.css. (To be honest, I haven’t thoroughly investigated it myself, so it might actually be possible—but personally, I haven’t heard of anyone doing it yet. :thinking:)

Technically speaking, it should be feasible. However, just like many other things in Wix that seem to go against its design philosophy and are therefore restricted, I suspect there are similar limitations when it comes to global.css. In fact, there are certain CSS features that can’t be used even within global.css, so importing styles from various external files or repositories—though convenient for advanced users—could introduce issues.

Such flexibility might end up confusing users who don’t fully understand how everything works, making the editor harder to use. If style conflicts or bugs caused by clashing CSS rules became frequent, it would reduce the usability of Wix as a platform used by a wide range of people. To avoid undermining the unified design experience that Wix aims to provide, I think they intentionally limit the environment to keep things within a predictable and controlled scope.

In a way, Wix is a service that deliberately restricts certain capabilities to strike a balance between ease of use for everyone and the quality of the final product. :innocent:

Hi @onemoretime, thanks for the explanation! I was looking for a confirmation if this was indeed not possible or if I was just missing something.