Webpack：无法使用url（）导入加载CSS

Question

花了一个小时试图解决问题，仍然一无所知。

我正在使用Webpack构建Angular 2应用程序，并且试图从PrimeUI导入一些CSS文件。不幸的是，在构建时会发出以下消息：

ERROR in ./~/primeui/themes/omega/theme.css
Module build failed: /home/mc128k/node/angular2-webpack-starter/node_modules/primeui/themes/omega/fonts/roboto-v15-latin-regular.eot:1
(function (exports, require, module, __filename, __dirname) { c?

SyntaxError: Unexpected token ILLEGAL
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:513:28)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/home/mc128k/node/angular2-webpack-starter/node_modules/primeui/themes/omega/theme.css:6:156)
    at Module._compile (module.js:541:32)
    at Object.loaderContext.exec (/home/mc128k/node/angular2-webpack-starter/node_modules/webpack-core/lib/NormalModuleMixin.js:88:7)
    at Object.module.exports (/home/mc128k/node/angular2-webpack-starter/node_modules/to-string-loader/src/to-string.js:6:54)
 @ ./src/main.browser.ts 2:0-41

那么这里发生了什么？通过webpack配置中定义的样式加载器可以正确解析CSS：

{
    test: /\.css$/,
    loaders: ['to-string-loader', 'css-loader']
},

如果我尝试删除此代码段，则会产生很多错误，因此可以正常工作。但是，如果CSS导入如下内容：

src: url('fonts/roboto-v15-latin-regular.eot');

然后编译失败。似乎webpack正在尝试解析字体。其他所有文件都会发生，例如woff和gif图像。

显然其他加载器被忽略了，但这很奇怪，因为它们看起来正确（我在这里尝试复制粘贴很多片段）。

  {
    test: /\.(ttf|gif|svg)(\?[a-z0-9]+)?$/,
    loader: 'file-loader'
  },
  {
    test: /\.(eot)(\?[a-z0-9]+)?$/,
    loader: 'file-loader'
  },

所以...我迷路了。试图研究文档，检查其他答案等等，但是当url()在CSS中看到函数时，我仍然不明白为什么webpack与加载器不匹配。

谢谢

Answer 1

您是否使用resolve-url（webpack中的resolve-url-loader）？

我将以下加载程序用于css：

{
      test: /\.css$/,
      loaders: ['style','css?sourceMap!postcss!resolve-url']
    },