Webpack:加载图标字体 [英] Webpack: loading iconic fonts

问题描述

我已经安装了font-awesome:

npm install font-awesome

我在webconfig上添加了以下规则:

I've added these rules on webconfig:

{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }

在我的main.scss中添加了此导入:

Into my main.scss I've added this import:

@import "font-awesome/scss/font-awesome.scss";

font-awesome CSS规则已加载到浏览器中，但未加载字体.

font-awesome css rules are loaded into browser but, fonts are not loaded.

似乎浏览器在_localhost/fonts/fontawesome-webfont.woff2?v=4.7.0上请求了字体.但是，响应是主要的html页面:

It seems fonts are requested by browser on _localhost/fonts/fontawesome-webfont.woff2?v=4.7.0. However, the response is the main html page:

我认为与字体有关的问题都被放入了nodo_modules/font-awesome/fonts/中.我认为无法找到这些文件，因为webpack不会将它们移动"到可访问的位置...那么，在webpack结束捆绑过程"之后，它们位于何处?

I think the problem is related with fonts are into nodo_modules/font-awesome/fonts/. I think these files are not able to be reached because they are not "moved" into a reachable place by webpack... So, where are they located after webpack ends "bundle process"?

编辑

我通过以下方式更改了考试

I've changed my test by:

{ test: /\.(ttf|eot|otf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }

但是，当浏览器尝试加载字体时，响应始终是html:

However when browser tries to load font, the response keep being an html:

编辑2

我刚刚意识到，在我的tsconfig.json文件中包含以下内容:

I've just realized that into my tsconfig.json file contains this:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["dom", "es6", "es2015", "es2016", "es2017"],
    "noEmitHelpers": true,
    "importHelpers": true,
    "skipDefaultLibCheck": true,
    "pretty": true,
    "sourceMap": true,
    "typeRoots": [
      "node_modules/@types"
    ]
  },
  "exclude": [
    "node_modules",  <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
    "compiled",
    "src/main.browser.aot.ts",
    "e2e/**/*.ts"
  ],
  "awesomeTypescriptLoaderOptions": {
    "useWebpackText": true,
    "forkChecker": true,
    "useCache": true
  },
  "compileOnSave": false,
  "buildOnSave": false,
  "atom": { "rewriteTsconfig": false }
}

有事吗?

推荐答案

我不确定100％的准确性，因为我无法安装

I'm not 100% sure this is accurate, because i can't install your repo - i'm getting some weird, incorrect dependency errors. But i think the issue is:

您的正则表达式未捕获FontAwesome.otf文件.

Your regex does not capture the FontAwesome.otf file.

该测试现在应该可以正常工作.

This test should work now..

{ test: /\.(ttf|eot|otf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }

这篇关于Webpack:加载图标字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！