web-dev-qa-db-ja.com

Vue cliとローカルRobotoフォントの使用方法をvuetify

Vue/VUE CLI 3.xで作成された開発中のVuetifyアプリケーションがあり、Google CDNではなくローカルでRobotoフォントを提供したいと考えています。

誰かがこれをwebpackとvue cliで生成したvuetifyアプリプロジェクトで実現しましたか？

vue.jswebpackvuetify.jsroboto
7
JohnC

最初のインストールパッケージtypeface-robotoをプロジェクトに追加します。

次に、それをmain.js/index.js/boot.jsなどにインポートします。

import 'typeface-roboto/index.css';

最後に、webpack.config.jsを使用すると、モジュールルール内でフォントファイルタイプを使用できます。

    module: {
        rules: [
            //other stuff
            { test: /\.(png|woff|woff2|eot|ttf|svg)$/, use: 'url-loader?limit=25000' }
        ]
    },

フォントファイルの種類はwoff、woff2、eotおよびttf。

5
SnakeyHips

Vue CLI 3 + Vuetify：

  • 書体ロボをインストール

    npm install --save-dev typeface-roboto

  • public/index.html、 削除する

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">

  • src/App.vue、 追加

    <style lang="sass">
  @import '../node_modules/typeface-roboto/index.css'
</style>
0
Sylvain Lesage