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

【问题标题】：Webpack: Cannot load CSS with url() importsWebpack：无法使用 url() 导入加载 CSS
【发布时间】：2016-12-11 14:41:00
【问题描述】：

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

我正在使用 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']
},

如果我尝试删除这个 sn-p 会生成很多错误，所以这很有效。但是如果 CSS 导入这样的东西：

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

然后编译失败。看起来 webpack 正在尝试解析字体。其他所有文件都会发生这种情况，例如 woff 和 gif 图像。

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

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

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

谢谢

【问题讨论】：

标签： html css angularjs webpack loader

【解决方案1】：

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

我为 css 使用以下加载器：

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

【讨论】：

[已删除，在再次询问之前搜索更多信息]
你有npm install resolve-url-loader 吗？也看看github.com/webpack/css-loader。
好的，通过安装 resolve-url resolve-url-loader 解决了，然后将 CSS 行更改为 loaders: ['style', 'css', 'resolve-url'] 并调整图像加载器正则表达式（它没有加载 ?stuff=v0.3.2 部分）/\.(ttf|gif|svg|png)(\?[a-z0-9\=\.]+)?$/, .现在编译器工作并且浏览器抛出关于“样式是字符串数组”的错误。如果我找到解决方案，将在此处更新。
更新：与 Angular 的 styleUrls 定义有冲突，使用时会显示错误 Expected 'styles' to be an array of strings。这是因为管道包含to-string，但现在它不再工作了。只需为 css 应用以下加载器管道：loaders: ['exports-loader?module.exports.toString()', 'style', 'css', 'resolve-url']，感谢this stackoverflow question。