Webpack: Невозможно загрузить CSS с помощью url() импорт

Question

Провел час, пытаясь решить проблему, все еще не понимая.

Я использую Webpack для создания приложения Angular 2, и я пытаюсь импортировать некоторые файлы CSS из PrimeUI. К сожалению, при его строительстве выдает это сообщение:

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

Итак ... Я потерян. Пробовал изучать документы, проверять другие ответы и т. Д., Но я до сих пор не понимаю, почему веб-пакет не соответствует загрузчику при просмотре функции url() в CSS.

Благодаря

Answer 1

ли вы использовать resolve-url (resolve-url-loader in webpack)?

Я использую следующий загрузчик для CSS:

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