fonts - node_modules - Cargando en fuentes locales con webpack 2 y vue-cli

node_modules material design icons iconfont material icons css

Question

Estoy usando la plantilla de paquete web vue-cli y estoy tratando de cargar fuentes locales en mi proyecto. Tengo problemas para corregir el camino a mis fuentes. ¿Cómo debería ser mi camino?

Encontré información sobre lo que podría estar haciendo mal, pero no pude resolverlo: https://github.com/webpack-contrib/sass-loader#problems-with-url

Estructura del archivo:

En mi _fonts.scss:

    // Webfont: LatoLatin-Regular
@font-face {
  font-family: ''LatoLatinWeb'';
  src: url(''../assets/fonts/LatoLatin-Regular.eot''); /* IE9 Compat Modes */
  src: url(''../assets/fonts/LatoLatin-Regular.eot?#iefix'') format(''embedded-opentype''), /* IE6-IE8 */
        url(''../assets/fonts/LatoLatin-Regular.woff2'') format(''woff2''), /* Modern Browsers */
        url(''../assets/fonts/LatoLatin-Regular.woff'') format(''woff''), /* Modern Browsers */
        url(''../assets/fonts/LatoLatin-Regular.ttf'') format(''truetype'');
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

Webpack.base.config.sj:

  {
    test: //.(woff2?|eot|ttf|otf)(/?.*)?$/,
    loader: ''url-loader'',
    options: {
      limit: 10000,
      name: utils.assetsPath(''fonts/[name].[hash:7].[ext]'')
    }
  }

Utils.js:

  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders(''less''),
    sass: generateLoaders(''sass'', { indentedSyntax: true }),
    scss: generateLoaders(''sass'').concat(
      {
        loader: ''sass-resources-loader'',
        options: {
          resources: path.resolve(__dirname, ''../src/styles/_variables.scss'')
        }
      }
    ).concat(
      {
        loader: ''sass-resources-loader'',
        options: {
          resources: path.resolve(__dirname, ''../src/styles/mixins/_mixins.scss'')
        }
      }      
    ).concat(
      {
        loader: ''sass-resources-loader'',
        options: {
          resources: path.resolve(__dirname, ''../src/styles/_fonts.scss'')
        }
      }      
    ),
    stylus: generateLoaders(''stylus''),
    styl: generateLoaders(''stylus'')
  }

¿Cómo cargo mis fuentes locales con la plantilla vue-cli webpack?

Answer 1

Importe mis fuentes de esta manera:

$font_path: ''~@/assets/fonts/'';

// *********** //
// SOURCE SANS //
// ITALIC
@font-face{
  font-family    : ''Source Sans Pro'';
  src            : url($font_path +''SourceSansPro-Italic.eot''); /* IE9 Compat; Modes */
  src            : url($font_path +''SourceSansPro-Italic.eot?#iefix'') format(''embedded-opentype''), /* IE6-IE8 */ url($font_path +''SourceSansPro-Italic.woff2'') format(''woff2''), /* Modern Browsers */ url($font_path +''SourceSansPro-Italic.woff'') format(''woff''); /* Modern Browsers */
  font-style     : italic, oblique;
  font-weight    : 400;
  text-rendering : optimizeLegibility;
}
// REGULAR
@font-face{
  font-family    : ''Source Sans Pro'';
  src            : url($font_path +''SourceSansPro-Regular.eot''); /* IE9 Compat; Modes */
  src            : url($font_path +''SourceSansPro-Regular.eot?#iefix'') format(''embedded-opentype''), /* IE6-IE8 */ url($font_path +''SourceSansPro-Regular.woff2'') format(''woff2''), /* Modern Browsers */ url($font_path +''SourceSansPro-Regular.woff'') format(''woff''); /* Modern Browsers */
  font-style     : normal;
  font-weight    : 400;
  text-rendering : optimizeLegibility;
}
// SEMI BOLD
@font-face{
  font-family    : ''Source Sans Pro'';
  src            : url($font_path +''SourceSansPro-Semibold.eot''); /* IE9 Compat; Modes */
  src            : url($font_path +''SourceSansPro-Semibold.eot?#iefix'') format(''embedded-opentype''), /* IE6-IE8 */ url($font_path +''SourceSansPro-Semibold.woff2'') format(''woff2''), /* Modern Browsers */ url($font_path +''SourceSansPro-Semibold.woff'') format(''woff''); /* Modern Browsers */
  font-style     : normal;
  font-weight    : 600;
  text-rendering : optimizeLegibility;
}
// Use "font-family: $source_sans_pro" in your code.
$source_sans_pro : ''Source Sans Pro'', sans-serif;
// [END] SOURCE SANS //
// ***************** //

Todas mis fuentes se encuentran en src/assets/fonts/

Mi archivo webpack.base.conf contiene este cargador:

 {
    test: //.(woff2?|eot|ttf|otf)(/?.*)?$/,
    loader: ''url-loader'',
    options: {
      limit: 10000,
      name: utils.assetsPath(''fonts/[name].[hash:7].[ext]'')
    }
  },