为什么webpack不能导入PrimeAreact CSS文件

Question

我想在我的应用程序上使用PrimeAreact 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

Answer 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"
},

Answer 2

也许这篇文章可以回答你的问题。复制整个答案太多了，我相信如果你能访问这个页面，你就可以访问这个答案。

最小可复制答案

您需要安装es2015预设：

npm install babel-preset-es2015
and then configure babel-loader:
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
}