Angular2/网络包 : how to load fonts that are imported inside css files?

Question

我正在使用 Angular2 beta.15 和 webpack 1.12.14。

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

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

并且，在 .css 文件中，导入了一些字体，如下所示，

@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 和如下字体的加载器

  {
    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 时，完全没有错误，但是当我启动服务器运行我的应用程序时，出现如下错误

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

如果我将 css 加载器更改为

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

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

Answer 1

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

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

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

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

所以在链中会发生以下情况:

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