我在最新的Roots/Sage 10上构建了一个项目。
我没有修改bud.config.js
,而是在从sage master分支克隆时保留它。
现在我正试图通过将其添加到app.css
:来添加自定义字体
@font-face {
font-family: "iconfont";
src: url("../fonts/iconfont.ttf?yh9ob") format("truetype"),
url("../fonts/iconfont.woff?yh9ob") format("woff"),
url("../fonts/iconfont.svg?yh9ob#baltimore") format("svg");
font-weight: normal;
font-style: normal;
font-display: block;
}
我将字体文件添加到resources/fonts
文件夹中。
文件夹结构:
- resources
|- fonts
|---- iconfont.svg
|---- iconfont.ttf
|---- iconfont.woff
|- images
|- scripts
|- styles
|---- app.css
...
当我运行npm run build
时,它会生成资源文件。但是字体文件没有加载到网站上。当我在公用文件夹中检查编译后的app.[hash].css
时,我找不到任何类似于@font-face...
的内容。我在bud构建日志的末尾看到了这一点:
⚠ Module Warning (from ./node_modules/resolve-url-loader/index.js):
resolve-url-loader: webpack misconfiguration
webpack or the upstream loader did not supply a source-map
⚠ Module Warning (from ./node_modules/resolve-url-loader/index.js):
resolve-url-loader: webpack misconfiguration
webpack or the upstream loader did not supply a source-map
当我运行npm run dev
时,它会显示相同的消息,只是挂在那里。资产甚至不会在manifest.json
之外的公用文件夹中生成。
% npm run dev
> dev
> bud dev
⚠ Module Warning (from ./node_modules/resolve-url-loader/index.js):
resolve-url-loader: webpack misconfiguration
webpack or the upstream loader did not supply a source-map
⚠ Module Warning (from ./node_modules/resolve-url-loader/index.js):
resolve-url-loader: webpack misconfiguration
webpack or the upstream loader did not supply a source-map
同样,我没有自己配置任何东西,我只有从sage repo的最新提交中提取的东西。
sage默认设置没有处理这个简单的样式添加,这有点令人沮丧。
有人知道我是否必须为自定义字体定义配置任何内容吗?
目前,root/sage10文档非常单薄,我无法找到我需要的东西。
寻求帮助!
提前感谢。。。
Bud 5.1.0解决了问题。
查看此提交https://github.com/roots/sage/commit/c03663602280a5e5bb9caa5c1c4c4b37a40c7395
使用~@字体。
示例:
src: url(~@fonts/iconfont.ttf?yh9ob) format('truetype')