使用 webpack 从 react-rails 应用程序中的node_modules加载字体

Question

我有一个使用 webpacker 设置的 react-rails 应用程序。

我正在尝试使用node_modules的字体加载字体真棒专业版。

我认为这是一项微不足道的任务，但我似乎找不到任何关于如何做到这一点的好文档。

这是我到目前为止所拥有的：

package.json 依赖项：

"dependencies": {
"@rails/webpacker": "3.5",
"babel-preset-react": "^6.24.1",
"bootstrap": "^4.1.3",
"prop-types": "^15.6.2",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-slick": "^0.23.1",
"react_ujs": "^2.4.4",
"slick-carousel": "^1.8.1",
"tachyons-z-index": "^1.0.9"
},
"devDependencies": {
"@fortawesome/fontawesome-pro": "^5.2.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-env": "^1.7.0",
"file-loader": "^2.0.0",
"path": "^0.12.7",
"webpack-dev-server": "2.11.2"
}

文件.js：

var path = require('path');
module.exports = {
test: /.(woff(2)?|eot|otf|ttf|svg)(?v=[0-9].[0-9].[0-9])?$/,
exclude: path.resolve(__dirname, '../../app/assets'),
use: {
loader: 'file-loader',
options: {
outputPath: 'fonts/',
useRelativePath: false
}
}
}

环境.js

const { environment } = require('@rails/webpacker')
const file = require('./file')
environment.loaders.prepend('file', file)
module.exports = environment

application.scss：

@import '@fortawesome/fontawesome-pro/scss/fontawesome.scss';

应用程序.rb：

config.assets.paths << Rails.root.join('node_modules')

我错过了什么？从我收集到的信息来看，webpack 应该查看node_modules目录，根据 webpacktest查找字体文件并将资产放入输出目录：fonts/.

Answer 1

FontAwesome with webfonts：

对于使用免费版本的我来说，下面的示例运行良好。我不知道专业版，但如果我没记错的话，你只需要重命名fontawesome-free以fontawesome-pro路径。

application.scss：

$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/solid.scss";
@import "~@fortawesome/fontawesome-free/scss/regular.scss";
@import "~@fortawesome/fontawesome-free/scss/brands.scss";

在 SCSS 中~(波浪号导入(表示查找最近的node_modules目录。并非所有 SASS 编译器都支持它，但node-sass支持它，这是 Webpack 的常见情况。

这样，在您的html中，您只需要 使用您的application.css.没有必要包含任何其他FontAwesome css文件。

您的字体加载器配置似乎正常(经过测试，已工作(。有了那个 Webpack 应该解析字体文件，然后根据需要将它们复制到您想要的输出中。这需要为您的css-loader配置url: true但我是默认设置。

Webpack 配置文件中加载器的最小/常规配置：

module: {
rules: [
{
test: /.s?css$/,
use: [
MiniCssExtractPlugin.loader, // optional (the most common way to export css)
"css-loader", // its url option must be true, but that is the default
"sass-loader"
]
},
{
// find these extensions in our css, copy the files to the outputPath,
// and rewrite the url() in our css to point them to the new (copied) location
test: /.(woff(2)?|eot|otf|ttf|svg)(?v=[0-9].[0-9].[0-9])?$/,
use: {
loader: 'file-loader',
options: {
outputPath: 'fonts/'
}
}
}
]
},

仅加载所需的字体(JS和SVG的新方式(

同样，我将使用免费版本进行演示，因为我没有专业版。

这样，您生成的捆绑包将仅包含您需要的图标，从而减小尺寸，这意味着页面加载速度更快。(我在我的项目中使用它(

所需的软件包：

@fortawesome/fontawesome-svg-core
@fortawesome/free-brands-svg-icons
@fortawesome/free-regular-svg-icons
@fortawesome/free-solid-svg-icons

将此包含在您的 scss 文件中：

@import "~@fortawesome/fontawesome-svg-core/styles";

创建一个新文件，将其命名为fontawesome.js：

import { library, dom, config } from '@fortawesome/fontawesome-svg-core';
config.autoAddCss = false;
config.keepOriginalSource = false;
config.autoReplaceSvg = true;
config.observeMutations = true;
// this is the 100% working way (deep imports)
import { faUser } from '@fortawesome/free-solid-svg-icons/faUser';
import { faHome } from '@fortawesome/free-solid-svg-icons/faHome';
import { faFacebook } from '@fortawesome/free-brands-svg-icons/faFacebook';
import { faYoutube } from '@fortawesome/free-brands-svg-icons/faYoutube';
// this is the treeshaking way (better, but read about it below)
import { faUser, faHome } from '@fortawesome/free-solid-svg-icons';
import { faFacebook, faYoutube } from '@fortawesome/free-brands-svg-icons';
library.add(faUser, faHome, faFacebook, faYoutube);
dom.watch();

.. 然后在你的 js 中的某个地方需要它：

require('./fontawesome');

就这样。如果你想阅读更多关于这方面的内容，请从了解SVG JavaScript Core开始，看看它的配置并阅读树摇动的文档。