2017-06-18 27 views
0

角CLIを使用せずにwebpackで最新のAngular2を設定しようとしています。しかし、私がプロジェクトを構築しようとすると、フォントワームフォントに関するエラーが常に表示されます。例えば:ここでWebpack + angular 2でフォントが正しく読み込まれない

ERROR in ./Content/fonts/fontawesome-webfont.svg?v=4.7.0 
Module parse failed: somewhere\fontawesome-webfont.svg?v=4.7.0 Unexpected token (1:0) 
You may need an appropriate loader to handle this file type. 

は私のWebPACKのモジュールの構成です:package.json中のWebPACKの

config.module = { 
    loaders: [{ 
      test: /\.ts$/, 
      loader: 'ts', 
      query: { 
       'ignoreDiagnostics': [ 
        2403, // 2403 -> Subsequent variable declarations 
        2300, // 2300 -> Duplicate identifier 
        2374, // 2374 -> Duplicate number index signature 
        2375, // 2375 -> Duplicate string index signature 
        2502 // 2502 -> Referenced directly or indirectly 
       ] 
      }, 
      exclude: [/node_modules\/(?!(ng2-.+))/] 
     }, 

     // copy those assets to output 
     { 
      test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, 
      loader: 'file?name=fonts/[name].[hash].[ext]?' 
     }, 

     // Support for *.json files. 
     { 
      test: /\.json$/, 
      loader: 'json' 
     }, 

     // Load css files which are required in vendor.ts 
     { 
      test: /\.css$/, 
      exclude: root('Scripts', 'app'), 
      loader: "style!css" 
     }, 

     // Extract all files without the files for specific app components 
     { 
      test: /\.less$/, 
      loader: 'style!css!less' 
     }, 

     // Extract all files for specific app components 
     { 
      test: /\.html$/, 
      loader: 'raw' 
     } 
     // { 
     //  test: /jquery\.js/, 
     //  loader: 'null-loader', 
     //  exclude: path.resolve('node_modules/jquery/') 
     // } 
    ], 
    postLoaders: [], 
    noParse: [/.+zone\.js\/dist\/.+/, /.+angular2\/bundles\/.+/, /angular2-polyfills\.js/, /jquery-ui\.js/, /jquery\.js/] 
}; 

バージョン - ここでは、 "2.6.1"

は私の少ないスタイルを参照して、私のコンポーネントです。

@Component({ 
    selector: 'my-app', 
    template: require('./app.component.html'), 
    styles: [require('../../../Content/custom/style.less')] 
}) 
export class AppComponent implements OnInit { 

    constructor() { } 

    ngOnInit() { 
    } 

} 

答えて

1

設定ファイルの変更テスト。

test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?\S*)?$/, 
      loader: 'file?name=fonts/[name].[hash].[ext]?' 
+0

今では動作しますが、私は別のエラーを取得: は './~/css-loader!./~/less-loader!./Content/custom/style.lessモジュールでエラーが見つかりませんエラー: 'ファイル'または 'ディレクトリ'を解決できません.. – Maris

+0

の../fonts/glyphicons-halflings-regular.ttf今のように見えますが、コンパイルされたlessファイルでは置き換えられません。 – Maris

関連する問題