为啥 webpack 不能导入 PrimeReact CSS 文件？

Posted 2023-02-22

【中文标题】为啥 webpack 不能导入 PrimeReact CSS 文件？

【英文标题】：Why webpack cant import PrimeReact CSS Files?为什么 webpack 不能导入 PrimeReact CSS 文件？

【发布时间】：2020-06-09 09:38:33

【问题描述】：

我想在我的应用上使用 PrimeReact DataTable。当我导入 css 文件时：

import "primereact/resources/themes/nova-light/theme.css";
import "primereact/resources/primereact.min.css";
import "primeicons/primeicons.css";

它会抛出这个错误：

ERROR in ./node_modules/primereact/resources/themes/nova-light/theme.css 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @charset "UTF-8";
| /* open-sans-300 - latin */
| @font-face 
 @ ./src/pages/_app.js 20:0-58
 @ ./src/index.js

ERROR in ./node_modules/primeicons/primeicons.css 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @font-face 
|     font-family: 'PrimeIcons';
|     font-display: auto;
 @ ./src/pages/_app.js 22:0-35
 @ ./src/index.js

ERROR in ./node_modules/primereact/resources/primereact.min.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

我已经像这样调整了 webpack.config.js：

var path = require("path");

module.exports = 
  module: 
    rules: [
      
        test: /\.s[ac]ss$/i,
        exclude: [
          path.resolve("node_modules/primereact/resources/primereact.css"),
          path.resolve(
            "node_modules/primereact/resources/themes/nova-light/theme.css"
          )
        ],
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader"
        ]
      ,
      
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 
          loader: "babel-loader"
        
      
    ]
  ,
  externals: 
    Config: JSON.stringify(
      process.env.NODE_ENV === "production"
        ? require("./config.prod.json")
        : require("./config.dev.json")
    )
  
;

类似问题的其他答案似乎已经过时，因为这样做会引发其他错误或相同的错误。

https://forum.primefaces.org/viewtopic.php?t=52134

【参考方案1】：

这篇文章有解决方案： https://github.com/webpack-contrib/sass-loader/issues/344

我错过了这些装载机：

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

【讨论】：

没问题！确保接受答案以关闭线程

PrimeReact 组件样式的实际解决方案是直接在 css 中使用 @import。我将在明天通过 *** 定义之前的答案。

【参考方案2】：

也许this 的帖子可能会回答您的问题。复制整个答案太多了，我相信如果您能够访问此页面，您将可以访问该答案。

最小可重复答案

需要安装es2015预设：

npm install babel-preset-es2015
and then configure babel-loader:


    test: /\.jsx?$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
    query: 
        presets: ['es2015']