Sass グローバル変数とミックスインが機能しない

Question

Vue 3.2.33 と Vite 2.9.5を使用してプロジェクトをセットアップしました

vue コンポーネントからグローバル変数またはミックスインにアクセスしようとすると、未定義のエラーが発生します。この問題は scss ファイルでは発生しません。

インポート内の CSS ルールは有効であるため、インポート自体は正常に機能しているようです。

vite.config.ts：

import { fileURLToPath, URL } from 'url';

import {defineConfig} から 'vite';
'@vitejs/plugin-vue' から vue をインポートします。

// https://vitejs.dev/config/
デフォルトのdefineConfigをエクスポート({
    プラグイン: [vue()]、
    解決する： {
        エイリアス: {
            '@': fileURLToPath(新しい URL('./src', import.meta.url)),
        }、
    }、
    css: {
        プリプロセッサオプション: {
            scss: {
                AdditionalData: '@use "@/styles/variables";',
            }、
        }、
    }、
});

src/styles/_variables.scss：

// ブレークポイント
$ブレークポイント: (
    "sm": 576ピクセル、
    「MD」: 768ピクセル、
    「lg」: 992ピクセル、
    "xl": 1200ピクセル、
    「xxl」: 1400ピクセル、
);

@ミックスインテスト {
    境界線: 3 ピクセルの赤一色。
}

使用例:

<stylescopedlang="scss">
@use 'sass:map';

。容器 {
    最大幅: 100%;
    幅: 100%;
    マージン: 0 自動;
    @include test; // <- 未定義

    ＆ - 流体 {
        最大幅: 100%;
        幅: 100%;
    }
}

$width: (
    「sm」: 540ピクセル、
    'md': 720ピクセル、
    'lg': 960ピクセル、
    'xl': 1140ピクセル、
    「xxl」: 1320ピクセル、
);

@each $breakpoint, $width in $widths {
    @media (min-width:map.get($breakpoints, $breakpoint)) { // <- $breakpoints 未定義
        。容器 {
            最大幅: $width;
        }
    }
}
</スタイル>

Answer 1

＃＃＃使用＃＃＃ ＃＃＃@輸入

vite 設定の

の代わりに

＃＃＃@使用

vite.config.ts

：

エクスポートデフォルトdefineConfig({ プラグイン: [vue()]、 css: { プリプロセッサオプション: { scss: { 追加データ: '@import "./src/styles/variables.scss";', }、 }、 }、 }); 同じファイル

variables.scss

 を 

main.ts

ファイルに再度インポートすることはできないことに注意してください。そうしないと、このエラーが発生します [sass] このファイルはすでにロードされています。 ところで、あなたが述べたように、各コンポーネントに

scss

 ファイルを手動でインポートすることもできますが、それは非常に面倒なので、

preprocessorOptions

で global を使用してください。 ## のようなグローバルに使用されるファイルの場合は、インポートします#variables.scss ファイルの場合は、vite.config.ts の方が良い選択です。

Answer 2

私はこの問題を「解決」することができました。ファイルがインポートした @use ルールをすべて置き換えると、sass コードが正しくインポートされ、機能することがわかりました。ただし、@import ルールを @use の前に配置できないため、構成から AdditionalData キーを削除し、次のルールを含める必要があるため、これにより新たな問題が発生します。手動でインポートします。