Cant change variable using scss variable

[bagaskarala]

Overview of the problem

Oruga version: [0.3.3]
Vuejs version: [2.6.12]
OS/Browser: Chrome

Description

Cant change using scss variable

Steps to reproduce

i'm using nuxt and import like this

import Vue from 'vue'
import Oruga from '@oruga-ui/oruga'
import '@oruga-ui/oruga/dist/oruga-full-vars.css'

Vue.use(Oruga)

then i created index.scss file to customize. i can do it using css variable like this:

:root {
    --oruga-pagination-margin: 1em;
}

but when i using scss variable, it wont work:

$pagination-margin: 1em;

How to override style using scss variable, there is no docs for this
https://oruga.io/documentation/#using-css-or-sass-scss-variables

[bagaskarala]

I've solved myself, here the step:

1. install sass instead node-sass
2. import our custom variable then import oruga scss

@import "./variables";
@import "node_modules/@oruga-ui/oruga/src/scss/oruga-full.scss";

Is my step correct? you should add this step to docs.

[jtommy]

Yes it's correct! We'll add an example in the docs

[astagi]

@bagaskarala thanks for your suggestion, these steps will be added to documentation asap!