在我的Vue.js / Vite應用程式中使用@use 'sass:color'會導致透過additionalData匯入的變數無法使用
P粉478445671
2023-08-17 14:44:11
<p>我正在使用Vue.js與Vitest和sass loader。 </p>
<p>當我在內聯的scss檔案或元件中使用<code>@use 'sass:color'</code>時，它似乎會覆蓋在<code>vite.config.ts</ code>檔案中設定的<code>css.preprocessorOptions.scss.additionalData</code>的變數。 </p>
<p>問題在這裡復現：https://stackblitz.com/edit/vitejs-vite-nk8yf5?file=src/style/sample.scss</p>
<p>以供日後參考，設定如下：</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 } 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 *;`,
},
},
},
});</pre>
<p><strong>./src/style/sample.scss</strong></p>
<pre class="brush:php;toolbar:false;">@use 'sass:color';
.sample-style {
color: $sample-var;
}</pre>
<p><strong>組件</strong>:</p>
<pre class="brush:php;toolbar:false;"><script setup>
</script>
<template>
<div class="sample-style">Hello sample style</div>
</template>
<style lang="scss" scoped>
@import '../style/sample.scss';
</style></pre>
<p>使用這段程式碼，我在<code>sample.scss</code>中的<code>$sample-var</code>拿到<code>Undefined variable.</code>的錯誤。 </p>
<p>然而，如果我註解掉<code>@use 'sass:color';</code>，它會按預期工作（我可以在我的組件文件中訪問<code>$sample- var</code>）。 </p>
<p>這裡發生了什麼事？我如何正確地在我的元件樣式中導入<code>sass:color</code>，同時使用<code>vite.config.js</code>中的<code>additionalData</code>使;一組變數在全域範圍內可存取？我對了解最佳實踐很感興趣。 </p>
在元件的
<style>標籤前，additionalData#中定義的Scss程式碼會被加入。因此，Sass編譯器最終處理的內容是：根據文件，當
sample.scss不包含任何@use語句時：這表示上述程式碼的評估方式類似於：
@use "./src/style/vars.scss" as *; .sample-style { color: $sample-var; }然而，根據導入模組系統文件的文檔（重點在於我）：
$sample-var是一個模組的成員，因此sample.scss#無法存取$sample-var。