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

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

由于

Answer 1

您使用resolve-url（resolve-url-loader in webpack）吗？

我使用以下加载程序来获取css：

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

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

1 个答案: