使用webpack从react_rails应用程序中的node_modules加载字体 [英] Load fonts from node_modules in react-rails application with webpack

问题描述

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

I have a react-rails application set up with webpacker.

我正在尝试使用来自node_modules的字体加载font-awesome-pro.

I am trying to load font-awesome-pro with it's fonts from node_modules.

我认为这是一项微不足道的任务，但是我似乎找不到任何有关如何执行此操作的良好文档.

I assume this is a trivial task but I can't seem to find any good documentation on how to do this.

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

This is what I have so far:

package.json依赖项:

package.json dependencies:

  "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"
  }

file.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
      }
    }
}

environment.js

environment.js

const { environment } = require('@rails/webpacker')
const file = require('./file')

environment.loaders.prepend('file', file)

module.exports = environment

application.scss:

application.scss:

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

application.rb:

application.rb:

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

我想念什么?据我所知，webpack应该查看node_modules目录，基于webpack test查找字体文件，然后将资源放入输出目录:fonts/.

What am I missing? From what I can gather, webpack should be looking at the node_modules directory, finding font files based on the webpack test and putting the assets into the output directory: fonts/.

推荐答案

FontAwesome与网络字体:

对于我来说，免费版本下面的示例很好用.我不知道专业版，但是如果我没记错的话，只需在路径中将fontawesome-free重命名为fontawesome-pro.

For me with the free version the example below is working well. I don't know the pro version, but if I'm not mistaken, you just have to rename fontawesome-free to fontawesome-pro in the paths.

application.scss:

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的常识.

In SCSS ~ (tilde import) means that look for the nearest node_modules directory. Not all SASS compilers supports it, but node-sass does, and this is the common for Webpack.

通过这种方式，您只需在html中使用application.css.无需包含任何其他FontAwesome css文件.

This way in your html you only have to use your application.css. There's no need to include any other FontAwesome css files.

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

Your font loader config seems OK (tested, worked). With that Webpack should resolve the font files and then copy them to your desired output as you wanted. This needs that your css-loader be configured with url: true but I that is the default.

Webpack配置文件中用于加载程序的最低/正常配置:

A minimal/usual config for the loaders in your Webpack config file:

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的新方式)

同样，我将以免费版本进行演示，因为我没有专业版.

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

This way your generated bundle will only contain those icons what you need, resulting in a much smaller size which means faster page loads. (I'm using this in my projects)

所需的软件包:

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

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

Include this in your scss file:

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

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

Create a new file, name it 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中的某个位置要求它:

.. and then require it somewhere in your js:

require('./fontawesome');

仅此而已.如果您想了解更多信息，请先了解 SVG JavaScript Core ，请查看其配置并阅读 treeshaking .

That's all. If you want to read more on this, start with understanding SVG JavaScript Core, have a look on its configuration and read the documantation of treeshaking.

这篇关于使用webpack从react_rails应用程序中的node_modules加载字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！