Menggunakan @use 'sass:color' dalam apl Vue.js/Vite saya menyebabkan pembolehubah yang diimport melalui additionalData menjadi tidak boleh digunakan

Question

Saya menggunakan Vue.js dengan Vitest dan pemuat sass.

Apabila saya menggunakan @use 'sass:color' dalam fail scss sebaris atau komponen, ia seolah-olah menimpa vite.config.tscss.preprocessorOptions.scss.additionalData

Masalahnya diterbitkan semula di sini: https://stackblitz.com/edit/vitejs-vite-nk8yf5?file=src%2Fstyle%2Fsample.scss

Untuk rujukan masa hadapan, tetapan adalah seperti berikut:

./src/style/vars.scss

$sample-var: red;

vite.config.js

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

// https://vitejs.dev/config/
eksport defineConfig lalai ({
  pemalam: [vue()],
  css: {
    prapemprosesPilihan: {
      scss: {
        additionalData: `@use "./src/style/vars.scss" sebagai *;`,
      },
    },
  },
});

./src/style/sample.scss

@use 'sass:color';

.gaya sampel {
  warna: $sample-var;
}

Komponen:

<setup script>

</skrip>

<template>
  <div class="sample-style">Helo gaya sampel</div>
</template>

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

Dengan menggunakan kod ini, saya mendapat Pembolehubah tidak ditentukan.$sample-var dalam sample.scss

Walau bagaimanapun, jika saya mengulas keluar @use 'sass:color';, ia berfungsi seperti yang diharapkan (saya boleh mengakses $sample- var).

Apa yang berlaku di sini? Bagaimanakah cara saya mengimport sass:color dalam gaya komponen saya semasa menggunakan additionalData dalam vite.config.js secara global? Saya berminat untuk belajar tentang amalan terbaik.

Answer 1

Kod Scss yang ditakrifkan dalam <style>标签前，additionalData komponen akan ditambah. Jadi apa yang akhirnya diproses oleh pengkompil Sass ialah:

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

Menurut dokumentasi , apabila pernyataan sample.scss不包含任何@use:

Ini bermakna kod di atas dinilai seperti:

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

Walau bagaimanapun, mengikut dokumentasi untuk mengimport fail sistem modul (penekanan saya):

$sample-var是一个模块的成员，因此sample.scss无法访问$sample-var.