Question

我正试图在角度社区提供的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软件包的代码段：

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

现在我遇到的问题是webpack无法加载font-awesome文件。以下错误显示在inspect element console

中

    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团队目前正在研究它（priority = urgent;））。

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

Answer 2

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

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

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

通过为您的字体文件放置加载器，您做得很好，但请注意，字体非常棒的字体具有版本扩展名。所以你的装载机测试 /。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" },

angular2 webpack没有加载字体 - 真棒

2 个答案: