sass import warning

[Fukao0129]

Versions

• vue-toastification 2.0.0-rc.5
• vue 3.8
• nuxt 3.13
• sass 1.80.5

Describe the bug

I'm trying to override the sass variables.
According to this document, I need to use @import.
But in Vue3, following warning occurs when I build the app.
DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

Expected behavior

No warnings

Steps to reproduce

Steps:

1. Make a scss file.

$vt-color-success: {MY_COLORCODE}
$vt-color-error: {MY_COLORCODE}
@import "vue-toastification/src/scss/_variables";
@import "vue-toastification/src/scss/_toastContainer";
@import "vue-toastification/src/scss/_toast";
@import "vue-toastification/src/scss/_closeButton";
@import "vue-toastification/src/scss/_progressBar";
@import "vue-toastification/src/scss/_icon";
@import "vue-toastification/src/scss/animations/_bounce";

2. Make a plugin file.

import Toast from "vue-toastification";
import "vue-toastification/dist/index.css";
import "@/assets/style/admin/custom-toast.scss";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(Toast, {
    containerClassName: "custom-toast-class",
    icon: true,
  });
});

3. Run npm run dev

Your Environment

• Device: HP notebook
• OS: Windows11, Linux, Docker Desktop
• Browser: Google Chrome

[meirroth]

Seeing the same after upgrading sass/sass-loader

- "sass": "^1.77.8",
+ "sass": "^1.83.0",
- "sass-loader": "^16.0.0",
+ "sass-loader": "^16.0.4",

[EHOzg]

maybe you can try @use

[yuuzora]

Using @use create a new problem, saying that .#{$vt-namespace}__container { $vt-namespace seems undefined.
Changed the import variables to the following so that it will be able to find $vt-namespace
@use "vue-toastification/src/scss/_variables" as *;
However, for some reasons it's still not working.

Am I missing something ?