Vue.js/Vite アプリで @use 'sass:color' を使用すると、AdditionalData 経由でインポートされた変数が使用できなくなります

Question

Vue.js を Vitest と sass ローダーとともに使用しています。

インライン scss ファイルまたはコンポーネントで @use 'sass:color' を使用すると、vite.config.tscss.preprocessorOptions.scss.AdditionalData code> ファイルに設定されます。

問題はここで再現されます: 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';
'@vitejs/plugin-vue' から vue をインポートします。

// https://vitejs.dev/config/
デフォルトのdefineConfigをエクスポート({
  プラグイン: [vue()]、
  css: {
    プリプロセッサオプション: {
      scss: {
        追加データ: `@use "./src/style/vars.scss" を *;`,
      }、
    }、
  }、
});

./src/style/sample.scss

@use 'sass:color';

.sample-style {
  色: $サンプル変数;
}

コンポーネント:

<スクリプトのセットアップ>

</スクリプト>

<テンプレート>
  <div class="sample-style">こんにちはサンプル スタイル</div>
</テンプレート>

<style lang="scss" スコープ付き>
@import '../style/sample.scss';
</style>

このコードを使用すると、未定義変数. in $sample-var in sample.scss という間違いが発生します。

ただし、@use 'sass:color'; をコメントアウトすると、期待どおりに動作します ($sample-var にアクセスできます)。

ここで何が起こっているのでしょうか? vite.config.js で AdditionalData を使用しているときに、コンポーネント スタイルに sass:color を適切にインポートするにはどうすればよいですか?世界的に？ベストプラクティスについて学ぶことに興味があります。

Answer 1

コンポーネントの <style> タグの前に、AdditionalData で定義された Scss コードが追加されます。 Sass コンパイラーが最終的に処理するものは次のとおりです:

リーリー

ドキュメント によると、sample.scss に @use ステートメントが含まれていない場合:

これは、上記のコードが次のように評価されることを意味します:

リーリー

ただし、

によると、モジュール システム ファイルのインポートに関するドキュメント (強調は私のものです):

$sample-var はモジュールのメンバーであるため、sample.scss は $sample-var にアクセスできません。