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']},