web-dev-qa-db-ja.com

Vue Cli 3ローカルフォントが読み込まれない

Vue CLI 3でカスタムローカルフォントを読み込もうとすると、フォントがまだ表示されません。エラーメッセージは表示されません。インスペクターは正しいルールが読み込まれていることを示していますが、フォントは#appのserifフォントがdistフォルダのどこにも表示されません。

Vue.config.jsにローダーを追加し、URLパスを変更し、@ font-faceルールを別の場所に移動し、パブリックパスを ''および '/'に変更して、scssをmain.jsにインポートしました。

フォントの読み込み：

@font-face {
    font-family: 'OpenSans-Regular';
    src: url('/assets/fonts/OpenSans-Regular.eot');
    src: url('/assets/fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
         url('/assets/fonts/OpenSans-Regular.otf') format('font-opentype'),
         url('/assets/fonts/OpenSans-Regular.woff') format('font-woff'),
         url('/assets/fonts/OpenSans-Regular.ttf') format('font-truetype'),
         url('/assets/fonts/OpenSans-Regular.svg#OpenSans-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

そしてApp.vue内で使用します：

<style lang="scss">
#app {
  font-family: 'OpenSans-Regular', serif;
}
</style>

そのスタイルは私のmain.scssファイル内に配置されます。次のようなファイル構造：

src
  assets
    fonts
      OpenSans-Regular.eot
      OpenSans-Regular.woff
      etc
  styles
    main.scss
  App.vue
vue.config.js

vue.config.jsファイルは次のとおりです。

module.exports = {
  publicPath: '/',
  css: {
    sourceMap: true,
    loaderOptions: {
      sass: {
        data: `@import "@/styles/main.scss";`
      }
    }
  },
  configureWebpack: {
    module: {
      rules: [{
        test: /\.(ttf|otf|eot|woff|woff2)$/,
        use: {
          loader: "file-loader",
          options: {
            name: "fonts/[name].[ext]",
          },
        },
      }]
    }
  }
}

私もvue.config.jsでchainWebpackを試しましたが、役に立ちませんでした：

chainWebpack: config => {
    config
      .module
      .rule("file")
      .test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/,)
      .use("url-loader")
      .loader("url-loader")
      .options({
        limit: 10000,
        name: 'assets/fonts/[name].[ext]'
      })
      .end();
  }
vue.jsfontsvue-clivue-cli-3webpack-file-loader
7
P. Jack

結局、ファイルローダーメソッドに移動して、フォントをパッケージ化し、パブリックパスを設定しました。

vue.config.js

module.exports = {
  assetsDir: 'assets/',
  publicPath: '/', // Base directory for dev
  css: {
    sourceMap: true,
    loaderOptions: {
      sass: {
        data: `@import "@/styles/main.scss";`
      }
    }
  },
  chainWebpack: config => {
    config.module
      .rule("fonts")
      .test(/\.(ttf|otf|eot|woff|woff2)$/)
      .use("file-loader")
        .loader("file-loader")
        .tap(options => {
          options = {
            // limit: 10000,
            name: '/assets/fonts/[name].[ext]',
          }
          return options
        })
        .end()
  }
};

ファイルローダーはjsで呼び出されない限りファイルを表示しないため、main.jsにインポートしました。コンソールログは、未使用のインポートにフラグを付けるリンターをナビゲートするためのものです

// Fonts need to be called in js for webpack to see and copy over
import OpenSansReg from './assets/fonts/OpenSans-Regular.ttf';
import OpenSansLight from './assets/fonts/OpenSans-Light.ttf';
import OpenSansBold from './assets/fonts/OpenSans-Bold.ttf';


console.log(OpenSansReg, OpenSansBold, OpenSansLight);

それから私のscssファイルの1つに

@font-face {
    font-family: 'OpenSans-Regular';
    src: url('/assets/fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
         url('/assets/fonts/OpenSans-Regular.otf') format('opentype'),
         url('/assets/fonts/OpenSans-Regular.woff') format('woff'),
         url('/assets/fonts/OpenSans-Regular.ttf') format('truetype'),
         url('/assets/fonts/OpenSans-Regular.svg#OpenSans-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}
1
P. Jack

カスタムフォントインポートもある最初のindex.htmlページのヘッドタグにカスタムアイコンフォントを貼り付けました。貼り付けるのと同じページ<div id="vue-app"></div>。他のすべてのページ/コンポーネントは、font-familyを使用できます。

<head> ... <link rel="stylesheet" href="icon-font/styles.css" /> </head>

しかし、プロジェクトの他の場所を試すと失敗します。そしてScssはコンパイルさえしません。

0
p4ttch

私にとっては、「format（）」というものを取り出して動作しました...最後に..

0
Kenn