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

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

谢谢

Answer 1

您使用resolve-url (resolve-url-loader in webpack)吗？

我使用下面的css加载器：

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