Невозможно получить доступ к CSS свойству через javascript

Question

CSS

<style scoped>

  body  {
    --main-colour: "deep-purple"
  }

  :root {
    --main-colour: "deep-purple"  
  }

Javascript

            colour() {
                console.log(getComputedStyle(document.documentElement).getPropertyValue('--main-colour'))
                console.log(getComputedStyle(document.body).getPropertyValue('--main-colour'))
                console.log(document.documentElement.style.getPropertyValue('--main-colour'))
            }

Проблема

После просмотра различных сообщений кажется, что я должен иметь возможность доступа к моей переменной CSS из javascript, но она не найдена ... в некоторых сообщениях я видел, как getComputedStyle указывает на различные элементы, поэтому я попробовал все что я видел, а также поместил переменную внутри тела, а не: root (последний, кажется, соглашение), но все равно не получает никакой радости.

<empty string>
<empty string>