最新版sass

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

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

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

 1@import'./variables.scss'

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

 1@forward './variables.scss'

如果控制台警告：

 1Deprecation 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’]

 1scss: {
 2          api: 'modern-compiler',
 3          silenceDeprecations: ['legacy-js-api']
 4        }
 5      }

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

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

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

 1<style lang="scss" scoped>
 2.text {
 3  font-size: 20px;
 4  color: $theme-color;
 5}
 6</style> 
 7————————————————————————————————————————————————————————————
 8 [vite] Pre-transform error: [sass] Undefined variable.
 9  ╷
104 │   color: $theme-color;
11  │          ^^^^^^^^^^^^
12  ╵
13  src\views\index.vue 4:10  root stylesheet

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

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

友情提醒一下：使用 as * 有可能会造成样式全局污染。所以使用时要注意管理好变量的命名

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

variables.scss文件：

 1$theme-color:

index.scss文件：

 1@forward './variables.scss';
 2* {
 3  margin: 0;
 4  padding: 0;
 5  box-sizing: border-box;
 6}

vite.config.js配置文件：

 1css: {
 2      preprocessorOptions: {
 3        scss: {
 4          api: 'modern-compiler',
 5          silenceDeprecations: ['legacy-js-api'],
 6          additionalData: `@use "@/assets/style/index.scss" as *;`
 7        }
 8      }
 9    }

vue文件：

 1<style lang="scss" scoped>
 2.text {
 3  font-size: 20px;
 4  color: $theme-color;
 5}
 6</style>