遇到升级新版sass（1.80以上）的相关配置问题

最新版sass

作者自己写这篇文章时的最新版本1.80.6

sass在1.80版本以上有不少使用发生了变化。以下几点是我新装最新版本sass遇到的问题：

在之前版本都是使用@import来对样式文件进行引用的，升级到最新版后你会发现报错了：

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

解决办法就是使用@use 或者@forward 来进行引用：

@forward './variables.scss'

如果控制台警告：

Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

解决方法：
在css的preprocessorOptions选项中配置：api: ‘modern-compiler’, 配置完后还是会有这个警告的话那就再加上配置：silenceDeprecations: [‘legacy-js-api’]

  scss: {
          api: 'modern-compiler',
          silenceDeprecations: ['legacy-js-api']
        }
      }

最后就是additionalData引用variables.scss或者index.scss：

additionalData: `@use "@/assets/style/index.scss" as *;`

这里要使用@use 而不是@improt 再后面还要加上 as *。这是因为使用@use 导入的变量不是直接暴露在当前作用域的。而是会带上文件名作为命名空间。这是什么意思呢？看下面代码就明白了：
如果不加as * 会报错：

<style lang="scss" scoped>
.text {
  font-size: 20px;
  color: $theme-color;
}
</style> 
————————————————————————————————————————————————————————————
 [vite] Pre-transform error: [sass] Undefined variable.
  ╷
4 │   color: $theme-color;
  │          ^^^^^^^^^^^^
  ╵
  src\views\index.vue 4:10  root stylesheet

如果你不想加as * 但又不想报错那就需要这么做：
1、直接在需要文件中直接导入公共文件，然后在使用。
2、如下：

<style lang="scss" scoped>
.text {
  font-size: 20px;
  color: index.$theme-color;  //否则就需要在这个公共变量前加上文件名
}
</style> 

以下为个人sass的完整引用及配置：

variables.scss文件：

$theme-color:#605BD7

index.scss文件：

@forward './variables.scss';
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

vite.config.js配置文件：

css: {
      preprocessorOptions: {
        scss: {
          api: 'modern-compiler',
          silenceDeprecations: ['legacy-js-api'],
          additionalData: `@use "@/assets/style/index.scss" as *;`
        }
      }
    }

vue文件：

<style lang="scss" scoped>
.text {
  font-size: 20px;
  color: $theme-color;
}
</style>