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。所以尝试这个装载链：

<SettingsBundle>
<SettingsGroup Id=""QAVerificationSettings"">
</SettingsGroup>
</SettingsBundle>

Webpack没有加载字体

1 个答案: