我正在使用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模板中加载本地字体?