Really don't understand what the authorities are doing

[tgy3300]

i created a vite+vue3+ts project with the npm create vite@latest command and installed the scss dependency with the npm i -D sass command

The project environment is as follows:

"vue": "^3.5.12"
"@vitejs/plugin-vue": "^5.1.4",
"typescript": "~5.6.3",
"vite": "^5.4.10",
"sass": "^1.80.4",
"vue-tsc": "^2.1.8"

node: v23.1.0
npm: 10.9.0

The project structure is as follows:

vite-project
    |--src
        |--assets
            |--style
                |--vars.scss
                |--base.scss
        |--main.ts
        ...
    |--index.html
    |--package.json
    |--vite.config.ts
    ...

The main file code is as follows

# vite.config.ts file code:

import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'

export default defineConfig({
	plugins: [vue()],
})

# src/main.ts file code:

import { createApp } from 'vue'
import App from './App.vue'
import './assets/style/base.scss'

createApp(App).mount('#app')

# src/assets/style/vars.scss file code:

$--color: #ff0000;

# src/assets/style/base.scss file code:

@use 'vars';

body,
html {
	padding: 0;
	margin: 0;
	background-color: $--color;
}

Start the project, the error is as follows:

[plugin:vite:css] [sass] Error: Undefined variable.
  ╷
7 │     background-color: $--color;
  │                       ^^^^^^^^
  ╵
  ..\..\..\..\src\assets\style\base.scss 7:20  root stylesheet

src/assets/style/base.scss document to this code, the above problem is solved, the project can be run

@import 'vars';

body,
html {
	padding: 0;
	margin: 0;
	background-color: $--color;
}

However, in the cmd run window, there is still the following prompt

Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

  ╷
3 │ ;@import "sass-embedded-legacy-load-done:2";
  │          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
    file:///F:/xxx/vite-project/src/assets/style/vars.scss 3:10  @import
    file:///F:/xxx/vite-project/src/assets/style/base.scss 1:9   root stylesheet

Hint this, that is, developers do not use @import, use @use, can use @use and report errors, this is not a dead circle, it is really very confused, what the official is doing, since the @import alternative has not come out, do not prompt

[nex3]

# src/assets/style/vars.scss file code:

$--color: #ff0000;

# src/assets/style/base.scss file code:

@use 'vars';

body,
html {
	padding: 0;
	margin: 0;
	background-color: $--color;
}

Start the project, the error is as follows:

[plugin:vite:css] [sass] Error: Undefined variable.
  ╷
7 │     background-color: $--color;
  │                       ^^^^^^^^
  ╵
  ..\..\..\..\src\assets\style\base.scss 7:20  root stylesheet

@use isn't a drop-in replacement with exactly the same semantics as @import. You'll need to read the documentation to learn to use it. In this case, there are two issues:

1. If you write @use 'vars' without an explicit namespace or lack thereof, the variables will be available in the namespace vars, as in vars.$color.

2. In the new module system, members whose names begin with - (or equivalently _) are considered private and aren't accessible outside the file they're defined in. You'll need to rename $--color if you want to share it across files.

However, in the cmd run window, there is still the following prompt

Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

  ╷
3 │ ;@import "sass-embedded-legacy-load-done:2";
  │          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
    file:///F:/xxx/vite-project/src/assets/style/vars.scss 3:10  @import
    file:///F:/xxx/vite-project/src/assets/style/base.scss 1:9   root stylesheet

This is sass/embedded-host-node#340, which has been fixed in 1.80.5.