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]'')
}
},