加载primeng.min.css时出现Webpack错误

Posted 2023-03-06

【中文标题】加载primeng.min.css时出现Webpack错误

【英文标题】：Webpack error while loading primeng.min.css

【发布时间】：2017-09-19 08:01:47

【问题描述】：

我刚刚使用yo aspnetcore-spa 创建了一个新项目。我正在尝试使用PrimeNG 组件库。 然后我安装了font-awesome和primeng：

npm install font-awesome primeng --save

然后将 CSS 添加到 webpack 供应商列表中：

 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'
]

然后当我尝试更新供应商文件时：

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

我得到这个错误：

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

知道我应该怎么做才能使 webpack 没有错误吗？

编辑

按照要求，这是我的 webpack 配置：

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

【问题讨论】：

You may need an appropriate loader to handle this file type.

您没有任何 .gif 文件的加载器。粘贴你的 webpack 配置。

在 webpack 配置中使用 File-loader（或）Url-loader 来解决问题

@MikhailLevsha 我现在确实粘贴了它。但我的理解是这条规则正在发挥作用： test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000'

@Vignesh 你能给我举个例子吗？我对 webpack 不熟悉

【参考方案1】：

检查以下代码。

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

    ]

【讨论】：

./~/primeng/resources/images/loading.gif 链接指向 node_modules 文件夹，但运行时不会从文件夹中提取图像

是的，但在我的 github 示例中，你看我已经有一个非常相似的规则，为什么它不起作用？

【参考方案2】：

正如我们从您的清单中看到的，webpack 正在使用 webpack.config.vendor.js 配置文件运行 - node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js

此配置中指定的url-loader 不包括gif 和jpg 扩展

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

尝试将gif 和jpg 添加到此正则表达式：test: /\.(png|gif|jpe?g|woff|woff2|eot|ttf|svg)(\?|$)/ 它应该可以解决您的问题。

【讨论】：

我已经添加了 gif，但是没有用。添加 jpe?g 修复它....谢谢 :)