Webpack error while loading primeng.min.css

Question

I just created a new project with yo aspnetcore-spa. I'm trying to use the PrimeNG component library. Then I installed font-awesome and primeng:

npm install font-awesome primeng --save

Then added CSS to the webpack vendor list:

 vendor: [
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    '@angular/platform-server',
    'angular2-universal',
    'angular2-universal-polyfills',
    'bootstrap',
    'bootstrap/dist/css/bootstrap.css',
    'es6-shim',
    'es6-promise',
    'event-source-polyfill',
    'jquery',
    'zone.js',
    'font-awesome/css/font-awesome.min.css',
    'primeng/resources/primeng.min.css',
    'primeng/resources/themes/omega/theme.css'
]

Then when I try to update the vendor files:

node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js

I get this errors:

E:\Astro\Clients\Astro.Clients.Web2>node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js
Hash: 14e6030c6f54434f312fd1aeb5e7ace276110a5c
Version: webpack 2.4.1
Child
    Hash: 14e6030c6f54434f312f
    Time: 6812ms
                                   Asset     Size  Chunks                    Chunk Names
    674f50d287a8c48dc19ba404d20fe713.eot   166 kB          [emitted]
    912ec66d7572ff821749319396470bde.svg   444 kB          [emitted]  [big]
    b06871f281fee6b241d60582ae9369b9.ttf   166 kB          [emitted]
                               vendor.js  4.74 MB       0  [emitted]  [big]  vendor
                              vendor.css   492 kB       0  [emitted]  [big]  vendor

    ERROR in ./~/primeng/resources/images/line.gif
    Module parse failed: E:\Astro\Clients\Astro.Clients.Web2\node_modules\primeng\resources\images\line.gif Unexpected character '' (1:6)
    You may need an appropriate loader to handle this file type.
    (Source code omitted for this binary file)
     @ ./~/primeng/resources/primeng.min.css 6:57692-57720 6:58209-58237
     @ dll vendor

    ERROR in ./~/primeng/resources/images/loading.gif
    Module parse failed: E:\Astro\Clients\Astro.Clients.Web2\node_modules\primeng\resources\images\loading.gif Unexpected character ' ' (1:7)
    You may need an appropriate loader to handle this file type.
    (Source code omitted for this binary file)
     @ ./~/primeng/resources/primeng.min.css 6:33379-33410
     @ dll vendor

    ERROR in ./~/primeng/resources/primeng.min.css
    Module build failed: ModuleParseError: Module parse failed: E:\Astro\Clients\Astro.Clients.Web2\node_modules\primeng\resources\images\loading.gif Unexpected character ' ' (1:7)
    You may need an appropriate loader to handle this file type.
    (Source code omitted for this binary file)
        at doBuild.e (E:\Astro\Clients\Astro.Clients.Web2\node_modules\webpack\lib\NormalModule.js:296:19)
        at runLoaders (E:\Astro\Clients\Astro.Clients.Web2\node_modules\webpack\lib\NormalModule.js:206:11)
        at E:\Astro\Clients\Astro.Clients.Web2\node_modules\loader-runner\lib\LoaderRunner.js:370:3
        at iterateNormalLoaders (E:\Astro\Clients\Astro.Clients.Web2\node_modules\loader-runner\lib\LoaderRunner.js:211:10)
        at E:\Astro\Clients\Astro.Clients.Web2\node_modules\loader-runner\lib\LoaderRunner.js:202:4
        at E:\Astro\Clients\Astro.Clients.Web2\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:62:14
        at _combinedTickCallback (internal/process/next_tick.js:73:7)
        at process._tickCallback (internal/process/next_tick.js:104:9)

    ERROR in E:\Astro\Clients\Astro.Clients.Web2\node_modules\extract-text-webpack-plugin\loader.js??ref--1-0!E:\Astro\Clients\Astro.Clients.Web2\node_modules\css-loader\index.js!E:\Astro\Clients\Astro.Clients.Web2\node_modules\primeng\resources\primeng.min.css doesn't export content
    Child extract-text-webpack-plugin:

        ERROR in ./~/primeng/resources/images/loading.gif
        Module parse failed: E:\Astro\Clients\Astro.Clients.Web2\node_modules\primeng\resources\images\loading.gif Unexpected character ' ' (1:7)
        You may need an appropriate loader to handle this file type.
        (Source code omitted for this binary file)
         @ ./~/css-loader!./~/primeng/resources/primeng.min.css 6:33379-33410

        ERROR in ./~/primeng/resources/images/line.gif
        Module parse failed: E:\Astro\Clients\Astro.Clients.Web2\node_modules\primeng\resources\images\line.gif Unexpected character '' (1:6)
        You may need an appropriate loader to handle this file type.
        (Source code omitted for this binary file)
         @ ./~/css-loader!./~/primeng/resources/primeng.min.css 6:57692-57720 6:58209-58237
Child
    Hash: d1aeb5e7ace276110a5c
    Time: 6064ms
                                   Asset     Size  Chunks                    Chunk Names
    674f50d287a8c48dc19ba404d20fe713.eot   166 kB          [emitted]
    912ec66d7572ff821749319396470bde.svg   444 kB          [emitted]  [big]
    b06871f281fee6b241d60582ae9369b9.ttf   166 kB          [emitted]
                               vendor.js  4.32 MB       0  [emitted]  [big]  vendor

    ERROR in ./~/primeng/resources/images/line.gif
    Module parse failed: E:\Astro\Clients\Astro.Clients.Web2\node_modules\primeng\resources\images\line.gif Unexpected character '' (1:6)
    You may need an appropriate loader to handle this file type.
    (Source code omitted for this binary file)
     @ ./~/css-loader!./~/primeng/resources/primeng.min.css 6:57692-57720 6:58209-58237
     @ ./~/primeng/resources/primeng.min.css
     @ dll vendor

    ERROR in ./~/primeng/resources/images/loading.gif
    Module parse failed: E:\Astro\Clients\Astro.Clients.Web2\node_modules\primeng\resources\images\loading.gif Unexpected character ' ' (1:7)
    You may need an appropriate loader to handle this file type.
    (Source code omitted for this binary file)
     @ ./~/css-loader!./~/primeng/resources/primeng.min.css 6:33379-33410
     @ ./~/primeng/resources/primeng.min.css
     @ dll vendor

Any idea what should I do to have no error with webpack?

EDIT

As asked, here are my webpack config:

• webpack.config.js
• webpack.config.vendor.js

Answer 1

As we can see from your listing, webpack is running with webpack.config.vendor.js config file - node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js

url-loader specified in this config not includes gif and jpg extensions

{ test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' }

Try add gif and jpg to this regexp: test: /\.(png|gif|jpe?g|woff|woff2|eot|ttf|svg)(\?|$)/ It's should solve your problem.

Answer 2

Check the below code.

module: {
            rules: [
            {

                test: /\.(woff2|woff|ttf|eot|svg|png|jpe?g|gif|svg|ico)(\?v=[a-z0-9]\.[a-z0-9]\.[a-z0-9])?$/,
                use: [
                    {
                        loader: 'url-loader?limit=100000'
                    }
                ]
            },
            {
                 test: /\.css$/,
                 use: ['style-loader', 'css-loader'],
             }

    ]}