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

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

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

Webpack：无法使用 url() 导入加载 CSS

Webpack: Cannot load CSS with url() imports

html

css

loader

angularjs

webpack