Import css variable from an external css file

Question

Im trying to use a variable defined in 'style.css' and import that file to 'theme.css'. The issue is that the variable isnt accessible yet. No image appears on the background of discord.

style.css

:root {
    --customImg: "https://initiate.alphacoders.com/images/133/stretched-1920-1080-1330237.png?7641";
}

theme.css

@import './style.css';

:root {
   /* Background image variable */
   --background-image: var(--customImg);
 }

When I tried this, I was expecting to see the image in the background but nothing changed. There was no image.

Answer 1

@import works, but you need to specify url() in the variable:

/* style.css */

:root {
  --customImg: url("https://initiate.alphacoders.com/images/133/stretched-1920-1080-1330237.png?7641");
}

/* theme.css */

@import 'style.css';

body {
  background-image: var(--customImg);
}