私は質問 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 によって書かれた手順に従うことを試みましたが、おそらく非常に愚かなことを見逃しています。
だから私はこれに素早く新鮮な一見をしただけで、最終的に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;
}
編集:
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']
}
]
}