gpt4 book ai didi

javascript - Webpack 和具有相对路径的字体

转载 作者:行者123 更新时间:2023-12-03 00:27:07 34 4
gpt4 key购买 nike

在 webpack.config.js 中有一个捆绑样式表(scss)和字体的配置

{
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)使用此字体

@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 文件

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加载但它不存在。有没有办法强制从根(/)加载所有字体?

最佳答案

引用这个,这个确切的问题似乎是他们文档中的一章: https://github.com/webpack-contrib/sass-loader#problems-with-url

关于javascript - Webpack 和具有相对路径的字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54042335/

34 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com