web-dev-qa-db-ja.com

vue-cli3でローカル書体を使用する

ローカル書体をvue-cli3プロジェクトにインポートしたいと思います。

.woffファイルと.woff3ファイルはsrc/assets/typoにあり、src/scss/_typo.scssに含めます： enter image description here

私の_typo.scssは次のようになります：

@font-face {
  font-family: 'HKGrotesk';
  src:  url('@/assets/typo/HKGrotesk-Bold.woff2') format('woff2'),
        url('@/assets/typo/HKGrotesk-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'HKGrotesk';
  src:  url('@/assets/typo/HKGrotesk-Medium.woff2') format('woff2'),
        url('@/assets/typo/HKGrotesk-Medium.woff') format('woff');
  font-weight: medium;
  font-style: normal;
}

@font-face {
  font-family: 'HKGrotesk';
  src:  url('@/assets/typo/HKGrotesk-Regular.woff2') format('woff2'),
        url('@/assets/typo/HKGrotesk-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

そして、これは色と書体をグローバルに使用するための私のvue.configです。

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/scss/_colors.scss";
          @import "@/scss/_typo.scss";
        `
      }
    }
  }
};

プロジェクトを実行すると、次のエラーメッセージが表示されます。

Failed to compile.

./src/App.vue?vue&type=style&index=0&lang=scss& (./node_modules/css-loader??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--8-oneOf-1-2!./node_modules/sass-loader/lib/loader.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss&)
Module not found: Error: Can't resolve './@/assets/typo/HKGrotesk-Bold.woff' in '/Users/robin/Documents/Code/2018/iamrobin-portfolio/src'
vue.jsfont-facevue-cli
6
iamrobin.

これがこの段階で役立つかどうかはわかりませんが、同じ問題が発生し、相対パスを使用して解決しました（つまり、../assets/fonts/myfont.woff）ルートワイルドカードを使用するのではなく（つまり、@/assets/fonts/myfont.woffまたは@~/assets/fonts/myfont.woff）。

お役に立てば幸いです。

3
Croot

私は同じ問題を抱えていました。それがvue cli githubの問題:)で参照されていることを望みました。相対パスを使用するように強制することで修正されましたが、これは本当に残念です。

0
y_nk

Vue-cli 3を使用すると、Webpack 4とデフォルトのローダーが機能するため、このようなタスク用にローダーを構成する必要はありません。あなたがしなければならない唯一のことはあなたのscssフォルダにmain.scssファイルを作成することです。そのファイルに、_color.scssと_typo.scssをインポートします。次に、main.jsにimport './stylus/main.scss';のようなメインスタイルファイルをインポートします。それで、あなたは行ってもいいはずです。たとえば、body {font-family: "HKGrotesk", sans-serif;}のようにCSSでフォントを使用するだけです。 Webpackのデフォルトの動作を妨げないように、cssローダーをvue.configから削除することを忘れないでください。

0
dalvallana