Angular2/Webpack：如何加载css文件中导入的字体？

我正在使用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

这些异常消失了，应用程序启动了，但我在浏览器控制台中收到了一些404请求错误，这些字体根本没有加载。

---

那么，你能给我一些建议吗？我怀疑我的加载器设置有问题。

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

        Just Try once to keep under one dir both font and css

        // and give the reference onces in webpack.config.rb

         # Set this to the root of your project when deployed:
         http_path = "/"
         css_dir = "app/assets/css"
         sass_dir = "app/assets/sass"

然后，加载程序生成的代码被传递到下一个加载程序。在这种情况下，您希望像这样链接

原始加载程序

和

url加载程序

，以获得所需的结果：

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

由于您需要首先将字体url自动转换为base64编码的样式，因此必须首先在链中调用

url加载器

。然后，由于您希望将此文件作为module.exports导入，因此可以调用

raw loader

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

url加载器

：将所有对静态资产的url引用转换为

base64:data

raw loader

：获取您的文件，并用字符串包装其整个代码，然后通过添加

module.exports='string'

试试这个：

@Component({
selector: 'my-app',
templateUrl: 'app/app.component.html',
styles: [
  require('../stylesheets/css/main.min.css').toString(),
  require('!style-loader!css-loader!less-loader!../less/example.less').toString()
]})

---

我知道commanand的意思是，类似的命令应该可以用于SCS

你能尝试将url加载程序链接到CSS的原始加载程序吗<代码>['raw-loader'，'url-loader']@SeanLarkin它能工作！太好了！你能解释一下原始加载程序的用法吗？我找不到它的文档。是的，我将创建一个带有解释的答案。

@Component({
selector: 'my-app',
templateUrl: 'app/app.component.html',
styles: [
  require('../stylesheets/css/main.min.css').toString(),
  require('!style-loader!css-loader!less-loader!../less/example.less').toString()
]})