Angular2/Webpack:如何加载在 css 文件中导入的字体?

问题描述

我使用的是 Angular2 beta.15 和 webpack 1.12.14.

I'm using Angular2 beta.15 and webpack 1.12.14.

我在 app.component.ts 中有一个 .css 和一个 .scss 文件，作为这样的全局模式.

I have one .css and one .scss file in app.component.ts as global patterns like this.

  @Component({
    selector: 'my-app',
    templateUrl: 'app/app.component.html',
    styles: [
      require('../stylesheets/css/main.min.css'),
      require('../sass/example.scss')
    ],
    encapsulation: ViewEncapsulation.None,
  })

而且，在 .css 文件中，一些字体被导入如下，

And, inside .css file, some fonts are imported like below,

@font-face {
    font-family: 'Helvetica Neue';
    src: url(fonts/light/helvetica-neue-light.eot) format("eot"),
         url(fonts/light/helvetica-neue-light.woff2) format("woff2"),
         url(fonts/light/helvetica-neue-light.woff) format("woff"),
         url(fonts/light/helvetica-neue-light.ttf) format("truetype");
    font-weight: 300;
    font-style: normal
}

在 webpack.config.js 中，我有 .css、.scss 和如下字体的加载器

In webpack.config.js, I have loaders for .css, .scss, and fonts like below

  {
    test: /\.scss$/,
    exclude: /node_modules/,
    loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
  },
  {
       test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/,
       loader: 'url-loader'
  },
  {
    test: /\.css$/,
    loaders: ['style', 'css']
  },

当我运行 webpack -display-error-details 时，完全没有错误，但是当我启动服务器运行我的应用程序时，出现如下错误

When I ran webpack -display-error-details, there is no error at all, but when I launched the server to run my app, I got error as below

EXCEPTION: Error during instantiation of Token Promise<ComponentRef>!.
ORIGINAL EXCEPTION: Expected 'styles' to be an array of string

如果我将 css 加载器更改为

If I change the css loader to

  {
    test: /\.css$/,
    loader: 'url-loader'  //or use 'raw-loader'
  },

那些异常消失了，应用程序启动了，但是我在浏览器的控制台中收到了一些 404 请求错误，这些字体根本没有加载.所以，你能给我一些指点吗?我怀疑我的加载程序设置有问题.

those exceptions disappeared and the app was start, but I got some 404 requests error for those fonts in browser's console, they're not loaded at all.So, could you give me some pointers? I suspect something wrong in my loader settings.

推荐答案

当您将多个加载器链接在一起时，它们的操作顺序是从右到左完成的.

When you chain multiple loaders together, the order of their actions are completed from right to left.

然后将加载器的结果代码传递给下一个.在这种情况下，您希望像这样链接 raw-loader 和 url-loader 以获得所需的结果:

Then the resulting code from the loader is passed to the next one. In this case, you want to chain the raw-loader and url-loader like this to give you the desired result:

loaders: ['raw-loader', 'url-loader']

由于您首先需要将字体 url 自动转换为以 base64 编码的样式，因此您必须首先在链中调用 url-loader.然后，由于您希望将此文件作为 module.exports 导入，因此您调用 raw-loader.

Since you need to first have your font urls, automatically converted to base64 encoded in the styles, you must first call url-loader in your chain. Then since you are looking to import this file as a module.exports, you call raw-loader.

因此在链中会发生以下情况:

So in the chain the following happens:

1. url-loader:将您对静态资产的所有 url 引用转换为 base64:data.
2. raw-loader:获取您的文件，并用字符串包装其整个代码，然后通过添加 module.exports='string'
使其可导入>

1. url-loader: Converts all of your url references to static assets into base64:data.
2. raw-loader: Takes your file, and wraps its entire code with a string and then makes it importable by adding module.exports='string'

这篇关于Angular2/Webpack:如何加载在 css 文件中导入的字体?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！