在我的Vue.js / Vite應用程式中使用@use 'sass:color'會導致透過additionalData匯入的變數無法使用

Question

我正在使用Vue.js與Vitest和sass loader。

當我在內聯的scss檔案或元件中使用@use 'sass:color'時，它似乎會覆蓋在vite.config.ts檔案中設定的css.preprocessorOptions.scss.additionalData的變數。

問題在這裡復現：https://stackblitz.com/edit/vitejs-vite-nk8yf5?file=src/style/sample.scss

以供日後參考，設定如下：

./src/style/vars.scss

$sample-var: red;

vite.config.js

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "./src/style/vars.scss" as *;`,
      },
    },
  },
});

./src/style/sample.scss

@use 'sass:color';

.sample-style {
  color: $sample-var;
}

組件:

<script setup>

</script>

<template>
  <div class="sample-style">Hello sample style</div>
</template>

<style lang="scss" scoped>
@import '../style/sample.scss';
</style>

使用這段程式碼，我在sample.scss中的$sample-var拿到Undefined variable.的錯誤。

然而，如果我註解掉@use 'sass:color';，它會按預期工作（我可以在我的組件文件中訪問$sample- var）。

這裡發生了什麼事？我如何正確地在我的元件樣式中導入sass:color，同時使用vite.config.js中的additionalData使;一組變數在全域範圍內可存取？我對了解最佳實踐很感興趣。

Answer 1

在元件的<style>標籤前，additionalData#中定義的Scss程式碼會被加入。因此，Sass編譯器最終處理的內容是：

@use "./src/style/vars.scss" as *;
@import '../style/sample.scss';

根據文件，當sample.scss不包含任何@use語句時：

這表示上述程式碼的評估方式類似於：

@use "./src/style/vars.scss" as *;
.sample-style {
  color: $sample-var;
}

然而，根據導入模組系統文件的文檔（重點在於我）：

$sample-var是一個模組的成員，因此sample.scss#無法存取$sample-var。