带有相对路径的 Webpack 和字体 [英] Webpack and fonts with relative paths
问题描述
在 webpack.config.js 中有一个配置来捆绑样式表 (scss) 和字体
In webpack.config.js there is a configuration to bundle stylesheets (scss) and fonts
{
use: [{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}],
test: /\.scss$/
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: './fonts/'
}
}]
}
一个样式表(styles.scss)使用这个字体
a stylesheet (styles.scss) use this font-face
@font-face {
font-family: "Frutiger Roman";
src: url("fonts/frutiger/FrutigerLTStd-Roman.eot");
src: url("fonts/frutiger/FrutigerLTStd-Roman.eot?#iefix") format("embedded-opentype"), url("fonts/frutiger/FrutigerLTStd-Roman.woff") format("woff"), url("fonts/frutiger/FrutigerLTStd-Roman.ttf") format("truetype"), url("fonts/frutiger/FrutigerLTStd-Roman.svg#Frutiger Roman") format("svg");
font-style: normal;
font-weight: 400;
}
webpack 的输出是一个 main.js 文件
The output from the webpack is a main.js file
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
当我从 root 访问 main.js 时,例如 http://localhost:8080/,字体是加载正确,来自 http://localhost:8080/fonts/FrutigerLTStd-Light.woff但是当我从子目录访问时,例如 http://localhost:8080/apps,字体被加载来自 http://localhost:8080/apps/fonts/FrutigerLTStd-Light.woff 但它不存在.有什么办法可以强制从root(/)加载所有字体?
When I access main.js from root, example http://localhost:8080/, the font is loaded correct, from http://localhost:8080/fonts/FrutigerLTStd-Light.woff But when I access from a sub directory, example http://localhost:8080/apps, the font is loaded from http://localhost:8080/apps/fonts/FrutigerLTStd-Light.woff but it does not exists. Is there any way to force all fonts to be loaded from root (/)?
推荐答案
参考这个,这个确切的问题似乎是他们文档中的一章:https://github.com/webpack-contrib/sass-loader#网址问题
refer to this, this exact problem seems to be one chapter in their documentation: https://github.com/webpack-contrib/sass-loader#problems-with-url
这篇关于带有相对路径的 Webpack 和字体的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!