Best practices for scss additionalData and @use

[shizhihuaxu]

As sass recommends using @use to import files, I would like to use this method to import scss files in my project. One problem I have encountered is that when a file is loaded in additionalData using @use for global use of scss variables, it is accessible if the scss variables are used directly within the style tag in the .vue file, but if the .vue file uses @use to reference a separate scss file that uses global scss variables, it will error out. file uses a global scss variable, it will report that it is not accessible, so using @import instead will work.

由于sass 推荐使用@use 导入文件，所以我希望项目中使用此方式导入scss 文件。我遇到的一个问题是，在 additionalData 中使用 @use 加载了某个文件以便全局使用scss变量，如果在 .vue 文件中的 style 标签内直接使用scss变量是可以访问到的，但是如果 .vue 文件使用@use引用了一个单独的 scss 文件，这个单独的 scss文件使用了全局scss变量，就会报错获取不到，改用@import 可以。

// vite.config.js
css: {
    preprocessorOptions: {
        scss: {
            // include some global sass variables
            additionalData: `
                @use "@/styles/_global.scss" as global; 
            `,
        },
    },
},

// src/index.scss
.test {
  color: global.$color;
}

<!-- src/App.vue -->
<template>
  <div class='test'></div>
</template>

<!-- error !-->
<style lang='scss' scoped>
@use './index.scss';
</style>

<!-- good-->
<style lang='scss' scoped>
@import './index.scss';
</style>

<!-- good -->
<style lang='scss' scoped>
.test {
  color: global.$color;
}
</style>

[cristian-atehortua]

https://sass-lang.com/documentation/at-rules/use/#differences-from-import

Basically, @use only imports variables, mixins, and functions si if you need other things to be available you need to use @import

[SirH3nry]

Hi, I'm here looking into an alternative to @import since dart-sass is removing it in 3.0.0.
https://sass-lang.com/documentation/breaking-changes/import/
@use and @forward won't work for my needs because, as you mentioned, they only include variables, mixins, and functions. I just want to have globally available (s)css properties.
Edit: I've figured it out. You can import an SCSS file in main.ts like

import '@/main.scss'