web-dev-qa-db-ja.com

vuejsとwebpackにフォントファイルをロードする方法は？

私はたくさんの読書をしましたが、どのリンクもvuejsにフォントを追加する方法を正確に示していません。これが、lessファイルにフォントをインポートする方法です。

@font-face {
  font-family: "Questrial";
  src: url("../../fonts/Questrial-Regular.ttf");
}

@font-face {
  font-family: "Galano_Grotesque_extra_Bold";
  src: url("../../fonts/Galano_Grotesque_Bold.otf");
}

@font-face {
  font-family: "Galano_Grotesque_Bold";
  src: url("../../fonts/Galano_Grotesque_DEMO_Bold.otf");
}

これは私が得るエラーです

./src/themes/jatango-theme/components/fonts/Galano_Grotesque_Bold.otf 1：4のエラーモジュールの解析に失敗しました：予期しない文字 ''（1：4）このファイルタイプを処理するには適切なローダーが必要な場合があります。 （このバイナリファイルのソースコードは省略されています）

私はVUEJSの初心者であり、reactやangularの知識はありません。私はjqueryとjavascriptしか知りません。だから誰かが私にフォントを含めるためのステップバイステップガイドを教えてください。前もって感謝します ：）

folder-structure

Folder-structure

javascriptvue.jswebpackvuejs2less
3
Raj

これが同じ問題に直面している他の人に役立つことを願っています。何らかの理由で、.otfファイルを使用するとVue.jsでエラーが発生します。 .woffを使用しましたが、すべて正常に動作します。 webpack.config.jsファイルで次のコードを使用します。

      module.exports = function (config, { isClient, isDev }) {
            module: { rules: [ { test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/, 
            loader: 'file-loader' } ] }
            return config }

このようなものを使用してcssファイルにファイルをインポートします

 @font-face { 
       font-family: "Questrial";
       src: url("../../fonts/Questrial-Regular.ttf"); 
   }
1
Boussadjra Brahim

これはwebpackエラーです。フォントファイルを管理するための webpack loader がありません。通常、フォントには file-loader を使用します。

{
  test: /\.(ttf|otf|eot|woff|woff2)$/,
  use: {
    loader: "file-loader",
    options: {
      name: "fonts/[name].[ext]",
    },
  },
}

このコードを webpack構成ファイル （モジュール>ルールセクション）に追加するか、vue-cli 3を使用している場合は vue.config.js ファイル（configurewebpackセクション）に追加します）。

3
Finrod

フォントをpublic/fonts/フォルダーに入れます。 cssまたはscssで、/fonts/で始まるパスを指定します。

scssの例：

$font-dir: "/fonts/";

@font-face {
  font-family: "NameFont";
  src: url("#{$font-dir}NameFontRegular/NameFontRegular.eot");
  src: url("#{$font-dir}NameFontRegular/NameFontRegular.eot?#iefix")format("embedded-opentype"),
  url("#{$font-dir}NameFontRegular/NameFontRegular.woff") format("woff"),
  url("#{$font-dir}NameFontRegular/NameFontRegular.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}

次に、scssをmain.jsにインポートします

例：

// eslint-disable-next-line
import styles from './assets/scss/main.scss';

またはvue.config.jsで

例：

module.exports = {
...
  css: {
    modules: true,
    loaderOptions: {
      css: {
        localIdentName: '[name]-[hash]',
        camelCase: 'only'
      },
      sass: {
        data: '@import "~@/assets/scss/import/_variables.scss"; @import "~@/assets/scss/import/_mixins.scss";'
      },
    },
  },
...
}
2
Pavel Levin