Webpack無法加載字體

Question

使用以下webpack配置我需要angular2組件的.scss文件。這些scss文件中的一些包含帶有字體的url（）指令。

sass編譯得很好，但沒有生成字體。

// Config for our build files 
    output: { 
    path: root('dist'), 
    filename: '[name].bundle.js', 
    sourceMapFilename: '[name].map', 
    chunkFilename: '[id].chunk.js' 
    }, 

    resolve: { 
    // ensure loader extensions match 
    extensions: prepend(['.ts', '.js', '.json', '.css', '.html', '.woff', '.eot', '.scss', '.svg', '.ttf'], '.async') // ensure .async.ts etc also works 
    }, 

    module: { 
    preLoaders: [ 
     // { test: /\.ts$/, loader: 'tslint-loader', exclude: [ root('node_modules') ] }, 
     // TODO(gdi2290): `exclude: [ root('node_modules/rxjs') ]` fixed with rxjs 5 beta.2 release 
     {test: /\.js$/, loader: "source-map-loader", exclude: [root('../node_modules/rxjs')]} 
    ], 
    loaders: [ 
     // Support Angular 2 async routes via .async.ts 
     {test: /\.async\.ts$/, loaders: ['es6-promise-loader', 'ts-loader'], exclude: [/\.(spec|e2e)\.ts$/]}, 

     // Support for .ts files. 
     {test: /\.ts$/, loader: 'ts-loader', exclude: [/\.(spec|e2e|async)\.ts$/]}, 

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

     //Fonts 
     {test: /\.(woff|eot|ttf|svg)/, loader: 'file-loader?name=assets/[name].[ext]?[hash]'}, 

     {test: /\.scss$/, loaders: ['raw-loader', 'postcss-loader', 'resolve-url-loader', 'sass-loader?sourceMap']}, 

     // support for .html as raw text 
     {test: /\.html$/, loader: 'raw-loader'} 

     // if you add a loader include the resolve file extension above 
    ] 
    }, 

    postcss: function() { 
    return [autoprefixer]; 
    }, 

Answer 1

resolve-url-loader不需要你自己的資產 - 你必須爲此使用css-loader。因此，嘗試這種裝載機鏈：

{test: /\.scss$/, loaders: ['raw-loader', 'css-loader', 'postcss-loader', 'resolve-url-loader', 'sass-loader?sourceMap']},