Vue 3 コンポーネントで事前定義された変数を使用したいと考えています。
残念ながら、「SassError: 未定義の変数。」というエラーが表示されます。 Vuetify のグローバル変数を使用するには何をインポートする必要がありますか?
これらの色の使用は so 簡単ではありません。
ここに記録されていますhttps://vuetifyjs.com/en/function/sass-variables/#webpack-install 注sass-loader@^7.0.0が必要で、Webpack構成を変更します
sass-loader@^7.0.0
コンポーネント ファイルにカラー変数をインポートする場合は、これをスキップすることもできます (../ の数は異なる場合があります)
../
次に覚えておくべきことは、オブジェクトの構造です
これは抜粋です
つまり、色は文字列ではなくオブジェクトにマッピングされるため (map-deep-merge を参照)、色の値を与えるために $red を使用することはできません。 。
map-deep-merge
$red
代わりに、map-deep-get 関数を使用してベースの赤を取得できます
map-deep-get
これは次のようになります
これらの色の使用は so 簡単ではありません。
ここに記録されていますhttps://vuetifyjs.com/en/function/sass-variables/#webpack-install 注
sass-loader@^7.0.0
が必要で、Webpack構成を変更しますコンポーネント ファイルにカラー変数をインポートする場合は、これをスキップすることもできます (
リーリー../
の数は異なる場合があります)次に覚えておくべきことは、オブジェクトの構造です
これは抜粋です
リーリーつまり、色は文字列ではなくオブジェクトにマッピングされるため (
map-deep-merge
を参照)、色の値を与えるために$red
を使用することはできません。 。代わりに、
リーリーmap-deep-get
関数を使用してベースの赤を取得できますこれは次のようになります
リーリー