ruby-on-rails - 如何使用 @rails/webpacker 加载本地字体?
问题描述
我在使用@rails/webpacker加载本地字体文件时遇到问题。字体是在开发环境中加载的,而不是在生产环境中加载的。这似乎是一个非常简单的问题,但我遇到了很多麻烦。下面是我的@font-face 代码。我的字体存储在 app/assets/images/fonts
应用程序 > 资产 > 样式表 > 配置 > _fonts.scss
@font-face {
font-family: "Axiforma";
src: url("fonts/Kastelov-AxiformaRegular.eot"); /* IE9 Compat Modes */
src: url("fonts/Kastelov-AxiformaRegular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("fonts/Kastelov-AxiformaRegular.otf") format("opentype"), /* Open Type Font */
url("fonts/Kastelov-AxiformaRegular.svg") format("svg"), /* Legacy iOS */
url("fonts/Kastelov-AxiformaRegular.ttf") format("truetype"), /* Safari, Android, iOS */
url("fonts/Kastelov-AxiformaRegular.woff") format("woff"), /* Modern Browsers */
url("fonts/Kastelov-AxiformaRegular.woff2") format("woff2"); /* Modern Browsers */
font-weight: 400;
font-style: normal;
}
在生产模式下获取字体文件会导致 404 错误。当我预编译资产时,我可以看到字体文件的文件名附加了一个哈希。在交付给浏览器的 css 文件中,字体文件的 url 保持不变。为了解决这个问题,我尝试在环境模块规则中使用file-loader、url-loader和resolve-url-loader,但无济于事。下面是我在 webpack 配置文件中的尝试。
配置 > webpack > environment.js
const { environment } = require('@rails/webpacker');
const webpack = require('webpack');
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
})
);
environment.module = {
rules: [
{
test: /\.(scss|sass|css)$/i,
use: [
{ loader: 'css-loader', options: { minimize: process.env.NODE_ENV === 'production' } },
{ loader: 'postcss-loader', options: { sourceMap: true } },
'resolve-url-loader',
{ loader: 'sass-loader', options: { sourceMap: true } }
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
{
loader: 'file-loader',
limit: '100000'
}
],
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
use: [
{
loader: 'url-loader',
limit: '100000'
}
]
}
]
};
module.exports = environment;
任何帮助将不胜感激 :)
解决方案
我正在使用 Rails 6.0.3 并且必须执行以下操作才能使用自定义字体:
创建一个字体文件夹:
app/javascript/application/fonts
并将我的字体放在那里(miso-bold.ttf
和miso-bold.otf
)在
app/javascript/application/app.scss
您的主.scss
文件中,我放置了以下内容:@font-face { font-family: "Miso"; src: url("./fonts/miso-bold.ttf") format("truetype"), url("./fonts/miso-bold.otf") format("opentype"); }
在任何
.css
你可以使用它:.someclass { font-family: "Miso"; }
值得注意的是,Webpacker 应该配置为包含字体文件(.otf
并且.ttf
最常见)。检查webpacker.yml
。
推荐阅读
- python - Python将数据从文件导入字典并比较数据
- python - 解决熊猫问题的并行编程方法
- python-3.x - python子进程中Popen和call的列表格式是什么?
- java - 了解 Java 继承和函数创建
- reactjs - 使用带有 setState 的 Immer 时出现“TypeError:在撤销的代理上尝试非法操作”
- selenium - 为什么我的 TesNG 只执行第一个测试类?是否不止一次调用同一个班级?请看xml
- php - 尝试将检查的数据提交到数据库
- perl - Text::CSV_XS 没有这样的文件或目录
- laravel - 从表单获取 ID:在 Laravel 的 if-else 中选择
- angular - Angular 组合来自多个 http 请求的数据