<p>Saya menggunakan Vue.js dengan Vitest dan pemuat sass. </p> <p>Apabila saya menggunakan <code>@use 'sass:color'</code> dalam fail scss sebaris atau komponen, ia seolah-olah menimpa <code>vite.config.ts</ Pembolehubah bagi <kod>css.preprocessorOptions.scss.additionalData</code> </p> <p>Masalahnya diterbitkan semula di sini: https://stackblitz.com/edit/vitejs-vite-nk8yf5?file=src%2Fstyle%2Fsample.scss</p> <p>Untuk rujukan masa hadapan, tetapan adalah seperti berikut: </p> <p><strong>./src/style/vars.scss</strong></p> <pre class="brush:php;toolbar:false;">$sample-var: red;</pre> <p><strong>vite.config.js</strong></p> <pre class="brush:php;toolbar:false;">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 *;`, }, }, }, });</pre> <p><strong>./src/style/sample.scss</strong></p> <pre class="brush:php;toolbar:false;">@use 'sass:color'; .gaya sampel { warna: $sample-var; }</pre> <p><strong>Komponen</strong>:</p> <pre class="brush:php;toolbar:false;"><setup script> </skrip> <template> <div class="sample-style">Helo gaya sampel</div> </template> <style lang="scss" scoped> @import '../style/sample.scss'; </style></pre> <p>Dengan menggunakan kod ini, saya mendapat <kod>Pembolehubah tidak ditentukan.</kod>$sample-var</code> dalam <code>sample.scss</code> </p> <p>Walau bagaimanapun, jika saya mengulas keluar <code>@use 'sass:color';</code>, ia berfungsi seperti yang diharapkan (saya boleh mengakses <code>$sample- var</code>). </p> <p>Apa yang berlaku di sini? Bagaimanakah cara saya mengimport <code>sass:color</code> dalam gaya komponen saya semasa menggunakan <code>additionalData</code> dalam <code>vite.config.js</code> secara global? Saya berminat untuk belajar tentang amalan terbaik. </p>

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

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