angular2 webpack不加载字体真棒

Question

我正在尝试在 Angular 社区提供的 angular2-seed 中测试 scss。

除了 font-awesome 包外一切正常。

下面是我的 package.json

    "devDependencies": {
 "angular2-template-loader": "^0.4.0",
 "awesome-typescript-loader": "^1.1.1",
 "bootstrap-sass": "^3.3.7",
 "css-loader": "^0.23.1",
 "font-awesome": "^4.6.3",
 "node-sass": "^3.8.0",
 "raw-loader": "^0.5.1",
 "sass-loader": "^4.0.0",
 "to-string-loader": "^1.1.4",
 "typescript": "~1.8.9",
 "typings": "~1.0.3",
 "webpack": "^1.12.9",
 "webpack-dev-server": "^1.14.0",
 "webpack-merge": "^0.8.4"
},

   "dependencies": {
"@angular/common": "2.0.0-rc.4",
"@angular/compiler": "2.0.0-rc.4",
"@angular/core": "2.0.0-rc.4",
"@angular/http": "2.0.0-rc.4",
"@angular/platform-browser": "2.0.0-rc.4",
"@angular/platform-browser-dynamic": "2.0.0-rc.4",
"@angular/router": "3.0.0-beta.2",
"core-js": "^2.2.0",
"ie-shim": "^0.1.0",
"rxjs": "5.0.0-beta.6",
"zone.js": "~0.6.12"
}

以下是我的 webpack.config.js 加载器部分。

    module: {
loaders: [
  // .ts files for TypeScript
    { test: /\.ts$/, loaders: ['awesome-typescript-loader', 'angular2-template-loader'] },
    { test: /\.css$/, loaders: ['to-string-loader', 'css-loader'] },
    { test: /\.html$/, loader: 'raw-loader' },
    { test: /\.scss$/, exclude: /node_modules/, loaders: ['raw-loader', 'sass-loader'] },// sass-loader not scss-loader
    {test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, loader: 'file?name=fonts/[name].[hash].[ext]?'},

]
}

在我的 app.component.ts 中，我包含了 main.scss，如下所示：

        styles:  [require("./res/scss/main.scss")],

以下是为调用font-awesome包而写的sn-p：

    @import "~bootstrap-sass/assets/stylesheets/_bootstrap";
    @import "~font-awesome/scss/font-awesome";
    @font-face {
      font-family: 'FontAwesome';
      font-weight: normal;
      font-style: normal;
    }

现在我面临的问题是 webpack 无法加载字体很棒的文件。 检查元素控制台中显示以下错误

    GET http://localhost:3000/fonts/fontawesome-webfont.woff2?v=4.6.3 localhost/:1 
    GET http://localhost:3000/fonts/fontawesome-webfont.woff?v=4.6.3 localhost/:1 
    GET http://localhost:3000/fonts/fontawesome-webfont.ttf?v=4.6.3 localhost/:1 

Answer 1

这是一个已知的错误，Angular 团队目前正在处理它（优先级 = 紧急；））。

这里是 GitHub 上问题的链接： https://github.com/angular/angular-cli/issues/1463

Answer 2

我发现您的代码有 2 个问题：

1. 将您的 scss 文件转换为 css，然后通过执行以下操作转换为字符串：

   { test: /\.scss$/, exclude: /node_modules/, loaders: ['css-to-string-loader', 'css-loader', 'sass-loader'] },// sass-loader not scss-loader
   

2. 您为字体文件放置加载器做得很好，但请注意 font-awesome 字体具有版本扩展名。 所以你的加载器测试 /.woff$/ 不会捕获扩展：fontawesome-webfont.woff2?v=4.6.3 尝试在加载器中添加以下扩展：

{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader" },
{ test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader" },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader" },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader" },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader" },