web-dev-qa-db-fra.com

Vue Cli 3 Les polices locales ne se chargent pas

Lorsque vous essayez de charger des polices locales personnalisées dans Vue CLI 3, les polices n'apparaîtront toujours pas. Je ne reçois aucun message d'erreur. L'inspecteur affiche la bonne règle en cours de chargement, mais les polices reviennent à serif sur #app. Les polices n'apparaissent nulle part dans mon dossier dist.

J'ai essayé d'ajouter des chargeurs dans vue.config.js, de changer les chemins d'url et de déplacer les règles @ font-face vers différents emplacements, de changer le chemin public en '' et '/', d'importer scss dans main.js.

Chargement des polices:

@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;
}

Et utilisez dans App.vue:

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

Ce style est placé dans mon main.scss fichier. La structure du fichier comme suit:

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

vue.config.js le fichier est le suivant:

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]",
          },
        },
      }]
    }
  }
}

J'ai également essayé un chainWebpack dans vue.config.js en vain:

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

Ce que j'ai fini par faire était de passer à une méthode de chargement de fichiers pour récupérer les polices et définir le chemin public.

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()
  }
};

Le chargeur de fichiers ne voit pas les fichiers sauf s'il est appelé dans le js, je les ai donc importés dans main.js Le journal de la console consiste à naviguer dans le linter signalant les importations inutilisées

// 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);

puis dans un de mes fichiers scss

@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

J'ai collé ma police d'icônes personnalisée dans les balises d'en-tête de ma page initiale index.html qui a également une importation de police personnalisée. La même page que vous colleriez votre <div id="vue-app"></div>. Toutes les autres pages/composants peuvent utiliser la famille de polices pour moi.

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

Mais si j'essaie n'importe quel autre emplacement du projet, il échoue. et le Scss ne compile même pas.

0
p4ttch

Pour moi, je viens de sortir cette chose 'format ()' et ça marche ... Enfin ..

0
Kenn