web-dev-qa-db-ja.com

vuetifyのデフォルトフォントの変更が機能しない（vue-cli 3）[Vuetify 1.X]

私は質問 change-default-font-in-vuetify を知っていますが、vue-cli-3が出る前に投稿されたので私の問題に対処していません。ここには当てはまりません。 テーマやその他のオプションの変更方法を検証する の公式ドキュメントには、vue-cli 3でプロジェクトを作成する際の有効な手順がありません。

これまでのところ、私の試みは次のようになります。
-vue create fooproject（デフォルトの設定を使用しますが、デフォルトを使用せず、プロジェクトに必要なものを選択し、css-preprocessorをスタイラスとして手動で選択しても動作しません）
-vue add vuetify
-プラグインdir：src/pluginsを作成し、vuetify.jsを保存します
-HelloWorldコンポーネントにv-btnを追加して、フォントに効果があるかどうかを確認します。
-その後、../stylus/main.stylをインポートできるはずです。

@import '~vuetify/src/stylus/settings/_variables'
$body-font-family = 'Open Sans', sans-serif;
$heading-font-family = 'Montserrat', sans-serif;
@import '~vuetify/src/stylus/main'

私も@import '〜vuetify/src/stylus/main'を試してみましたが、vueスタイラスローダーの依存関係を追加したり、何か追加したりする必要がありますか？ VuetifyのWebサイトで。

エラーログ：エラーはありません。Robotoフォントを素材ボタンに入れたままにします

ご意見はありますか？

その他の試み： Jacob E. Dawson によって書かれた手順に従うことを試みましたが、おそらく非常に愚かなことを見逃しています。

vuetify.jsvue-cli-3stylus-loader
7
sab

だから私はこれに素早く新鮮な一見をしただけで、最終的にvue-cli 3（カスタム選択またはデフォルトのいずれか）でプロジェクトが作成され、コンポーネントApp.vueでCSSを上書きするため、スタイルセクションからfont-familyを取り出します。

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif; /* this was it */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
5
sab

編集：
main.stylからスタイルをインポートすると、一部のスタイルが破損する可能性があります。
https://github.com/vuetifyjs/vuetify/issues/358

すべてがロードされますか、エラーが発生しますか？

おそらくどこかにタイプミスがあったり、パスが間違っていたりしない限り、動作するはずです。
たとえば、stylusはstylesである必要があります@require '~vuetify/src/stylus/main.styl'。

vueスタイラスローダーを追加しますか？

既に追加されているはずです。

Vue-cliのインストール中に特定のCSSプリプロセッサー（つまりスタイラス）を選択しなかった場合は、手動で追加する必要があります
npm i -S stylus stylus-loader

module: {
  rules: [
    {
      test: /\.styl$/,
      loader: ['style-loader', 'css-loader', 'stylus-loader']
    }
  ]
}
2
Traxo