<p>Vue.js を Vitest と sass ローダーとともに使用しています。 </p> <p>インライン scss ファイルまたはコンポーネントで <code>@use 'sass:color'</code> を使用すると、<code>vite.config.ts</ の変数が上書きされるようです。 <code>css.preprocessorOptions.scss.AdditionalData</code> 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'; '@vitejs/plugin-vue' から vue をインポートします。 // https://vitejs.dev/config/ デフォルトのdefineConfigをエクスポート({ プラグイン: [vue()]、 css: { プリプロセッサオプション: { scss: { 追加データ: `@use "./src/style/vars.scss" を *;`, }、 }、 }、 });</pre> <p><strong>./src/style/sample.scss</strong></p> <pre class="brush:php;toolbar:false;">@use 'sass:color'; .sample-style { 色: $サンプル変数; }</pre> <p><strong>コンポーネント</strong>:</p> <pre class="brush:php;toolbar:false;"><スクリプトのセットアップ> </スクリプト> <テンプレート> <div class="sample-style">こんにちはサンプル スタイル</div> </テンプレート> <style lang="scss" スコープ付き> @import '../style/sample.scss'; </style></pre> <p>このコードを使用すると、<code>未定義変数.</code> in <code>$sample-var</code> in <code>sample.scss</code> という間違いが発生します。 </p> <p>ただし、<code>@use 'sass:color';</code> をコメントアウトすると、期待どおりに動作します (<code>$sample-var</code> にアクセスできます)。 </p> <p>ここで何が起こっているのでしょうか? <code>vite.config.js</code> で <code>AdditionalData</code> を使用しているときに、コンポーネント スタイルに <code>sass:color</code> を適切にインポートするにはどうすればよいですか?世界的に？ベストプラクティスについて学ぶことに興味があります。 </p>