After spending an hour trying to solve the problem, I am still clueless.
I've been using Webpack to build my Angular 2 app and I'm attempting to import CSS files from PrimeUI. However, during the build process, I encountered this error message:
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
This issue arises when the CSS is being parsed by the style loader specified in the webpack configuration:
{
test: /\.css$/,
loaders: ['to-string-loader', 'css-loader']
}If I remove this snippet, it leads to a lot of errors. However, issues occur when the CSS imports items like this:
src: url('fonts/roboto-v15-latin-regular.eot');
The compilation fails because webpack attempts to parse the font file. This problem occurs with other file types as well, such as woff and gif images.
It seems like the other loaders are being ignored, even though they are properly configured (I have tried copying various snippets).
{
test: /\.(ttf|gif|svg)(\?[a-z0-9]+)?$/,
loader: 'file-loader'
},
{
test: /\.(eot)(\?[a-z0-9]+)?$/,
loader: 'file-loader'
}At this point, I am lost. I have read through documentation, consulted other resources, but I am unable to understand why webpack does not recognize a loader when encountering the url() function in the CSS.
Any help would be greatly appreciated.