webpack 2とvue-cliでローカルフォントを読み込む

Question

vue-cli webpackテンプレートを使用していて、プロジェクトでローカルフォントを読み込もうとしています。フォントのパスが正しく表示されません。私のパスはどのように見えますか？

私は私が間違っているかもしれないものについていくつかの情報を見つけましたが、私はそれを把握することができませんでした：https://github.com/webpack-contrib/sass-loader#problems-with-url

ファイル構造：私の_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') 
    } 

どのように私はVUE-CLI WebPACKのテンプレートを使用しての私の地元のフォントをロードしますか？

Answer 1

私はこのように私のフォントをインポートします。

$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 // 
// ***************** // 

私のすべてのフォントはsrc/assets/fonts/

に位置している私のwebpack.base.confファイルは、このローダーが含まれています

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