Variables override by SCSS does not work

[iBobik]

I am trying to override colors by this config:

  elementPlus: {
    importStyle: 'scss',
  },

  modules: [
    '@element-plus/nuxt',
  ],

  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@use "@/assets/css/el-override.scss" as element;`,
        },
      },
    },

assets/css/el-override.scss:

@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': #f7931a,
    ),
  )
);

But it fails like this:

[3:31:25 AM] ⚙ Warmup for /@fs//Users/Bobik/Sites/berubitcoin/assets/css/el-override.scss failed with: [sass] Module loop: this module is already being loaded.
  ╷
1 │ @use "@/assets/css/el-override.scss" as element;@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  assets/css/el-override.scss 1:1  root stylesheet

  ╷
  1 │ @use "@/assets/css/el-override.scss" as element;@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  assets/css/el-override.scss 1:1  root stylesheet
  at Object.wrapException (node_modules/sass/sass.dart.js:1257:17)
  at node_modules/sass/sass.dart.js:84586:27
  at _wrapJsFunctionForAsync_closure.$protected (node_modules/sass/sass.dart.js:3979:15)
  at _wrapJsFunctionForAsync_closure.call$2 (node_modules/sass/sass.dart.js:33174:12)
  at _awaitOnObject_closure.call$1 (node_modules/sass/sass.dart.js:33162:32)
  at Object._rootRunUnary (node_modules/sass/sass.dart.js:4353:18)
  at StaticClosure.<anonymous> (node_modules/sass/sass.dart.js:113560:16)
  at _CustomZone.runUnary$2$2 (node_modules/sass/sass.dart.js:34570:39)
  at _Future__propagateToListeners_handleValueCallback.call$0 (node_modules/sass/sass.dart.js:33643:51)
  at Object._Future__propagateToListeners (node_modules/sass/sass.dart.js:4149:93)
  at _Future._completeWithValue$1 (node_modules/sass/sass.dart.js:33502:9)
  at _AsyncAwaitCompleter.complete$1 (node_modules/sass/sass.dart.js:33149:14)
  at Object._asyncReturn (node_modules/sass/sass.dart.js:3951:17)
  at node_modules/sass/sass.dart.js:80595:24
  at _wrapJsFunctionForAsync_closure.$protected (node_modules/sass/sass.dart.js:3979:15)
  at _wrapJsFunctionForAsync_closure.call$2 (node_modules/sass/sass.dart.js:33174:12)
  at _awaitOnObject_closure.call$1 (node_modules/sass/sass.dart.js:33162:32)
  at Object._rootRunUnary (node_modules/sass/sass.dart.js:4353:18)
  at StaticClosure.<anonymous> (node_modules/sass/sass.dart.js:113560:16)
  at _CustomZone.runUnary$2$2 (node_modules/sass/sass.dart.js:34570:39)
  at _Future__propagateToListeners_handleValueCallback.call$0 (node_modules/sass/sass.dart.js:33643:51)
  at Object._Future__propagateToListeners (node_modules/sass/sass.dart.js:4149:93)
  at _Future._completeWithValue$1 (node_modules/sass/sass.dart.js:33502:9)
  at _AsyncAwaitCompleter.complete$1 (node_modules/sass/sass.dart.js:33149:14)
  at Object._asyncReturn (node_modules/sass/sass.dart.js:3951:17)
  at node_modules/sass/sass.dart.js:80652:24
  at _wrapJsFunctionForAsync_closure.$protected (node_modules/sass/sass.dart.js:3979:15)
  at _wrapJsFunctionForAsync_closure.call$2 (node_modules/sass/sass.dart.js:33174:12)
  at _awaitOnObject_closure.call$1 (node_modules/sass/sass.dart.js:33162:32)
  at Object._rootRunUnary (node_modules/sass/sass.dart.js:4353:18)
  at StaticClosure.<anonymous> (node_modules/sass/sass.dart.js:113560:16)
  at _CustomZone.runUnary$2$2 (node_modules/sass/sass.dart.js:34570:39)
  at _Future__propagateToListeners_handleValueCallback.call$0 (node_modules/sass/sass.dart.js:33643:51)
  at Object._Future__propagateToListeners (node_modules/sass/sass.dart.js:4149:93)
  at _Future._completeWithValue$1 (node_modules/sass/sass.dart.js:33502:9)
  at _AsyncAwaitCompleter.complete$1 (node_modules/sass/sass.dart.js:33149:14)
  at Object._asyncReturn (node_modules/sass/sass.dart.js:3951:17)
  at node_modules/sass/sass.dart.js:98156:24
  at _wrapJsFunctionForAsync_closure.$protected (node_modules/sass/sass.dart.js:3979:15)
  at _wrapJsFunctionForAsync_closure.call$2 (node_modules/sass/sass.dart.js:33174:12)
  at _awaitOnObject_closure.call$1 (node_modules/sass/sass.dart.js:33162:32)
  at Object._rootRunUnary (node_modules/sass/sass.dart.js:4353:18)
  at StaticClosure.<anonymous> (node_modules/sass/sass.dart.js:113560:16)
  at _CustomZone.runUnary$2$2 (node_modules/sass/sass.dart.js:34570:39)
  at _Future__propagateToListeners_handleValueCallback.call$0 (node_modules/sass/sass.dart.js:33643:51)
  at Object._Future__propagateToListeners (node_modules/sass/sass.dart.js:4149:93)
  at _Future._completeWithValue$1 (node_modules/sass/sass.dart.js:33502:9)
  at _AsyncAwaitCompleter.complete$1 (node_modules/sass/sass.dart.js:33149:14)
  at Object._asyncReturn (node_modules/sass/sass.dart.js:3951:17)
  at node_modules/sass/sass.dart.js:98278:24
[3:31:25 AM] ⚙ Warmup for /@fs//Users/Bobik/Sites/berubitcoin/node_modules/element-plus/theme-chalk/src/common/var.scss failed with: [sass] Module loop: this module is already being loaded.
  ╷
1 │ ┌ @forward 'element-plus/theme-chalk/src/common/var.scss' with (
2 │ │   $colors: (
3 │ │     'primary': (
4 │ │       'base': #f7931a,
5 │ │     ),
6 │ │   )
7 │ │ );
  │ └─^
  ╵
  assets/css/el-override.scss 1:1                                @use
  node_modules/element-plus/theme-chalk/src/common/var.scss 1:1  root stylesheet

  ╷
  1 │ ┌ @forward 'element-plus/theme-chalk/src/common/var.scss' with (
  2 │ │   $colors: (
  3 │ │     'primary': (
  4 │ │       'base': #f7931a,
  5 │ │     ),
  6 │ │   )
  7 │ │ );
  │ └─^
  ╵
  assets/css/el-override.scss 1:1                                @use
  node_modules/element-plus/theme-chalk/src/common/var.scss 1:1  root stylesheet
  at Object.wrapException (node_modules/sass/sass.dart.js:1257:17)
  at node_modules/sass/sass.dart.js:84586:27
  at _wrapJsFunctionForAsync_closure.$protected (node_modules/sass/sass.dart.js:3979:15)
  at _wrapJsFunctionForAsync_closure.call$2 (node_modules/sass/sass.dart.js:33174:12)
  at _awaitOnObject_closure.call$1 (node_modules/sass/sass.dart.js:33162:32)
  at Object._rootRunUnary (node_modules/sass/sass.dart.js:4353:18)
  at StaticClosure.<anonymous> (node_modules/sass/sass.dart.js:113560:16)
  at _CustomZone.runUnary$2$2 (node_modules/sass/sass.dart.js:34570:39)
  at _Future__propagateToListeners_handleValueCallback.call$0 (node_modules/sass/sass.dart.js:33643:51)
  at Object._Future__propagateToListeners (node_modules/sass/sass.dart.js:4149:93)
  at _Future._completeWithValue$1 (node_modules/sass/sass.dart.js:33502:9)
  at _AsyncAwaitCompleter.complete$1 (node_modules/sass/sass.dart.js:33149:14)
  at Object._asyncReturn (node_modules/sass/sass.dart.js:3951:17)
  at node_modules/sass/sass.dart.js:80595:24
  at _wrapJsFunctionForAsync_closure.$protected (node_modules/sass/sass.dart.js:3979:15)
  at _wrapJsFunctionForAsync_closure.call$2 (node_modules/sass/sass.dart.js:33174:12)
  at _awaitOnObject_closure.call$1 (node_modules/sass/sass.dart.js:33162:32)
  at Object._rootRunUnary (node_modules/sass/sass.dart.js:4353:18)
  at StaticClosure.<anonymous> (node_modules/sass/sass.dart.js:113560:16)
  at _CustomZone.runUnary$2$2 (node_modules/sass/sass.dart.js:34570:39)
  at _Future__propagateToListeners_handleValueCallback.call$0 (node_modules/sass/sass.dart.js:33643:51)
  at Object._Future__propagateToListeners (node_modules/sass/sass.dart.js:4149:93)
  at _Future._completeWithValue$1 (node_modules/sass/sass.dart.js:33502:9)
  at _AsyncAwaitCompleter.complete$1 (node_modules/sass/sass.dart.js:33149:14)
  at Object._asyncReturn (node_modules/sass/sass.dart.js:3951:17)
  at node_modules/sass/sass.dart.js:80652:24
  at _wrapJsFunctionForAsync_closure.$protected (node_modules/sass/sass.dart.js:3979:15)
  at _wrapJsFunctionForAsync_closure.call$2 (node_modules/sass/sass.dart.js:33174:12)
  at _awaitOnObject_closure.call$1 (node_modules/sass/sass.dart.js:33162:32)
  at Object._rootRunUnary (node_modules/sass/sass.dart.js:4353:18)
  at StaticClosure.<anonymous> (node_modules/sass/sass.dart.js:113560:16)
  at _CustomZone.runUnary$2$2 (node_modules/sass/sass.dart.js:34570:39)
  at _Future__propagateToListeners_handleValueCallback.call$0 (node_modules/sass/sass.dart.js:33643:51)
  at Object._Future__propagateToListeners (node_modules/sass/sass.dart.js:4149:93)
  at _Future._completeWithValue$1 (node_modules/sass/sass.dart.js:33502:9)
  at _AsyncAwaitCompleter.complete$1 (node_modules/sass/sass.dart.js:33149:14)
  at Object._asyncReturn (node_modules/sass/sass.dart.js:3951:17)
  at node_modules/sass/sass.dart.js:98156:24
  at _wrapJsFunctionForAsync_closure.$protected (node_modules/sass/sass.dart.js:3979:15)
  at _wrapJsFunctionForAsync_closure.call$2 (node_modules/sass/sass.dart.js:33174:12)
  at _awaitOnObject_closure.call$1 (node_modules/sass/sass.dart.js:33162:32)
  at Object._rootRunUnary (node_modules/sass/sass.dart.js:4353:18)
  at StaticClosure.<anonymous> (node_modules/sass/sass.dart.js:113560:16)
  at _CustomZone.runUnary$2$2 (node_modules/sass/sass.dart.js:34570:39)
  at _Future__propagateToListeners_handleValueCallback.call$0 (node_modules/sass/sass.dart.js:33643:51)
  at Object._Future__propagateToListeners (node_modules/sass/sass.dart.js:4149:93)
  at _Future._completeWithValue$1 (node_modules/sass/sass.dart.js:33502:9)
  at _AsyncAwaitCompleter.complete$1 (node_modules/sass/sass.dart.js:33149:14)
  at Object._asyncReturn (node_modules/sass/sass.dart.js:3951:17)
  at node_modules/sass/sass.dart.js:98278:24
[3:31:25 AM] ⚙ Warmup for /@fs//Users/Bobik/Sites/berubitcoin/node_modules/element-plus/theme-chalk/src/mixins/function.scss failed with: [sass] Module loop: this module is already being loaded.
  ╷
5 │ @use '../mixins/function.scss' as *;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules/element-plus/theme-chalk/src/common/var.scss 5:1       @forward
  assets/css/el-override.scss 1:1                                     @use
  node_modules/element-plus/theme-chalk/src/mixins/function.scss 1:1  root stylesheet

  ╷
  5 │ @use '../mixins/function.scss' as *;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules/element-plus/theme-chalk/src/common/var.scss 5:1       @forward
  assets/css/el-override.scss 1:1                                     @use
  node_modules/element-plus/theme-chalk/src/mixins/function.scss 1:1  root stylesheet
  at Object.wrapException (node_modules/sass/sass.dart.js:1257:17)
  at node_modules/sass/sass.dart.js:84586:27
  at _wrapJsFunctionForAsync_closure.$protected (node_modules/sass/sass.dart.js:3979:15)
  at _wrapJsFunctionForAsync_closure.call$2 (node_modules/sass/sass.dart.js:33174:12)
  at _awaitOnObject_closure.call$1 (node_modules/sass/sass.dart.js:33162:32)
  at Object._rootRunUnary (node_modules/sass/sass.dart.js:4353:18)
  at StaticClosure.<anonymous> (node_modules/sass/sass.dart.js:113560:16)
  at _CustomZone.runUnary$2$2 (node_modules/sass/sass.dart.js:34570:39)
  at _Future__propagateToListeners_handleValueCallback.call$0 (node_modules/sass/sass.dart.js:33643:51)
  at Object._Future__propagateToListeners (node_modules/sass/sass.dart.js:4149:93)
  at _Future._completeWithValue$1 (node_modules/sass/sass.dart.js:33502:9)
  at _AsyncAwaitCompleter.complete$1 (node_modules/sass/sass.dart.js:33149:14)
  at Object._asyncReturn (node_modules/sass/sass.dart.js:3951:17)
  at node_modules/sass/sass.dart.js:80595:24
  at _wrapJsFunctionForAsync_closure.$protected (node_modules/sass/sass.dart.js:3979:15)
  at _wrapJsFunctionForAsync_closure.call$2 (node_modules/sass/sass.dart.js:33174:12)
  at _awaitOnObject_closure.call$1 (node_modules/sass/sass.dart.js:33162:32)
  at Object._rootRunUnary (node_modules/sass/sass.dart.js:4353:18)
  at StaticClosure.<anonymous> (node_modules/sass/sass.dart.js:113560:16)
  at _CustomZone.runUnary$2$2 (node_modules/sass/sass.dart.js:34570:39)
  at _Future__propagateToListeners_handleValueCallback.call$0 (node_modules/sass/sass.dart.js:33643:51)
  at Object._Future__propagateToListeners (node_modules/sass/sass.dart.js:4149:93)
  at _Future._completeWithValue$1 (node_modules/sass/sass.dart.js:33502:9)
  at _Future__asyncCompleteWithValue_closure.call$0 (node_modules/sass/sass.dart.js:33579:18)
  at Object._rootRun (node_modules/sass/sass.dart.js:4343:16)
  at StaticClosure.<anonymous> (node_modules/sass/sass.dart.js:113557:16)
  at _CustomZone.run$1$1 (node_modules/sass/sass.dart.js:34565:39)
  at _CustomZone_bindCallback_closure.call$0 (node_modules/sass/sass.dart.js:34664:25)
  at Object._microtaskLoop (node_modules/sass/sass.dart.js:4207:24)
  at StaticClosure._startMicrotaskLoop (node_modules/sass/sass.dart.js:4213:11)
  at _AsyncRun__scheduleImmediateJsOverride_internalCallback.call$0 (node_modules/sass/sass.dart.js:33075:21)
  at invokeClosure (node_modules/sass/sass.dart.js:1458:26)
  at Immediate._onImmediate (node_modules/sass/sass.dart.js:1479:18)
  at process.processImmediate (node:internal/timers:476:21)
[3:31:25 AM] ⚙ Warmup for /@fs//Users/Bobik/Sites/berubitcoin/node_modules/element-plus/theme-chalk/src/mixins/config.scss failed with: [sass] Module loop: this module is already being loaded.
  ╷
1 │ @use 'config';
  │ ^^^^^^^^^^^^^
  ╵
  node_modules/element-plus/theme-chalk/src/mixins/function.scss 1:1  @use
  node_modules/element-plus/theme-chalk/src/common/var.scss 5:1       @forward
  assets/css/el-override.scss 1:1                                     @use
  node_modules/element-plus/theme-chalk/src/mixins/config.scss 1:1    root stylesheet

  ╷
  1 │ @use 'config';
  │ ^^^^^^^^^^^^^
  ╵
  node_modules/element-plus/theme-chalk/src/mixins/function.scss 1:1  @use
  node_modules/element-plus/theme-chalk/src/common/var.scss 5:1       @forward
  assets/css/el-override.scss 1:1                                     @use
  node_modules/element-plus/theme-chalk/src/mixins/config.scss 1:1    root stylesheet
  at Object.wrapException (node_modules/sass/sass.dart.js:1257:17)
  at node_modules/sass/sass.dart.js:84586:27
  at _wrapJsFunctionForAsync_closure.$protected (node_modules/sass/sass.dart.js:3979:15)
  at _wrapJsFunctionForAsync_closure.call$2 (node_modules/sass/sass.dart.js:33174:12)
  at _awaitOnObject_closure.call$1 (node_modules/sass/sass.dart.js:33162:32)
  at Object._rootRunUnary (node_modules/sass/sass.dart.js:4353:18)
  at StaticClosure.<anonymous> (node_modules/sass/sass.dart.js:113560:16)
  at _CustomZone.runUnary$2$2 (node_modules/sass/sass.dart.js:34570:39)
  at _Future__propagateToListeners_handleValueCallback.call$0 (node_modules/sass/sass.dart.js:33643:51)
  at Object._Future__propagateToListeners (node_modules/sass/sass.dart.js:4149:93)
  at _Future._completeWithValue$1 (node_modules/sass/sass.dart.js:33502:9)
  at _AsyncAwaitCompleter.complete$1 (node_modules/sass/sass.dart.js:33149:14)
  at Object._asyncReturn (node_modules/sass/sass.dart.js:3951:17)
  at node_modules/sass/sass.dart.js:80595:24
  at _wrapJsFunctionForAsync_closure.$protected (node_modules/sass/sass.dart.js:3979:15)
  at _wrapJsFunctionForAsync_closure.call$2 (node_modules/sass/sass.dart.js:33174:12)
  at _awaitOnObject_closure.call$1 (node_modules/sass/sass.dart.js:33162:32)
  at Object._rootRunUnary (node_modules/sass/sass.dart.js:4353:18)
  at StaticClosure.<anonymous> (node_modules/sass/sass.dart.js:113560:16)
  at _CustomZone.runUnary$2$2 (node_modules/sass/sass.dart.js:34570:39)
  at _Future__propagateToListeners_handleValueCallback.call$0 (node_modules/sass/sass.dart.js:33643:51)
  at Object._Future__propagateToListeners (node_modules/sass/sass.dart.js:4149:93)
  at _Future._completeWithValue$1 (node_modules/sass/sass.dart.js:33502:9)
  at _Future__asyncCompleteWithValue_closure.call$0 (node_modules/sass/sass.dart.js:33579:18)
  at Object._rootRun (node_modules/sass/sass.dart.js:4343:16)
  at StaticClosure.<anonymous> (node_modules/sass/sass.dart.js:113557:16)
  at _CustomZone.run$1$1 (node_modules/sass/sass.dart.js:34565:39)
  at _CustomZone_bindCallback_closure.call$0 (node_modules/sass/sass.dart.js:34664:25)
  at Object._microtaskLoop (node_modules/sass/sass.dart.js:4207:24)
  at StaticClosure._startMicrotaskLoop (node_modules/sass/sass.dart.js:4213:11)
  at _AsyncRun__scheduleImmediateJsOverride_internalCallback.call$0 (node_modules/sass/sass.dart.js:33075:21)
  at invokeClosure (node_modules/sass/sass.dart.js:1458:26)
  at Immediate._onImmediate (node_modules/sass/sass.dart.js:1479:18)
  at process.processImmediate (node:internal/timers:476:21)

I was looking on the starter project, but maybe I miss something…

Thank you for help.

[tolking]

The configuration seems to be fine, it may be that you have used the el-override.scss file elsewhere. You can refer to the template to see the differences

[iBobik]

Sorry, it works now. Maybe some caching or so.

[iBobik]

So my issue is only with dev server, generated version works.

Template project is different in pnpm vs. npm in my and my use also tailwind.