为什么我不能将 primereact 样式导入到 webpack 4 react 样板？

Question

运行应用程序时出现此错误：

ERROR in ./node_modules/primereact/resources/themes/saga-blue/theme.css (./node_modules/css-loader!./node_modules/style-loader!./node_modules/css-loader!./node_modules/primereact/resources/themes/saga-blue/theme.css)
Module build failed (from ./node_modules/css-loader/index.js):
Unknown word (2:1)
1 |
> 2 | var content = require("!!../../../../css-loader/index.js!./theme.css");
| ^
3 |
4 | if(typeof content === 'string') content = [[module.id, content, '']];
5 |
@ ./node_modules/primereact/resources/themes/saga-blue/theme.css 2:14-136 21:1-42:3 22:19-141
@ ./src/index.js

我没有修改任何通用、开发和生产的网络包。我已经阅读了围绕这个发布的另外两个问题，但没有一个答案有效。为了您的方便，我会发布webpack配置。

常见：

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
main: path.resolve(__dirname, "../src", "index.js"),
},
output: {
filename: '[name].[hash].js',
path: path.resolve(__dirname, '../dist'),
publicPath: "/"
},
devServer: {
port: 3042,
historyApiFallback: true,
overlay: true,
open: true,
},
module: {
rules: [
{
test: /.(js|jsx)$/,
exclude: [/node_modules/],
use: [{ loader: "babel-loader" }]
},
{
test: /.*.(gif|png|jp(e*)g|svg)$/i,
use: [
{
loader: "url-loader",
options: {
limit: 21000,
name: "images/[name]_[hash:7].[ext]"
}
}
]
},
// Vendor CSS loader
// This is necessary to pack third party libraries like antd
{
test: /.css$/,
include: path.resolve(__dirname, '../node_modules'),
use: [
'style-loader',
'css-loader'
],
},
]
},
plugins: [
new HtmlWebPackPlugin({
template: path.resolve(__dirname, '../public', 'index.html'),
}),
],
resolve: {
extensions: ['.js', '.jsx']
},
}

开发：

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const mapStyle = process.env.MAP_STYLE === 'true';
module.exports = merge (common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
port: 3042,
historyApiFallback: true,
overlay: true,
open: true,
stats: 'errors-only'
},
module: {
rules: [
{
test: /.css$/,
use: [
{ loader: "style-loader" },
{ loader: mapStyle ? "css-loader?sourceMap" : "css-loader" }
]
},
{
test: /.s(a|c)ss$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "sass-loader" }
]
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
}),
],
});

产品：

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const ManifestPlugin = require('webpack-manifest-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const enableBundleAnalyzer = process.env.ENABLE_ANALYZER === 'true';
module.exports = merge(common, {
mode: 'production',
devtool: 'source-map',
module: {
rules: [
{
test: /.css$/,
use: [
{ loader: MiniCssExtractPlugin.loader },
{ loader: "css-loader" }
]
},
{
test: /.s(a|c)ss$/,
use: [
{ loader: MiniCssExtractPlugin.loader },
{ loader: "css-loader" },
{ loader: "sass-loader" }
]
},
]
},
optimization: {
splitChunks: {
chunks: 'all',
},
runtimeChunk: false,
},
plugins: [
new CleanWebpackPlugin([path.resolve(__dirname, '../dist')], {
root: process.cwd(),
verbose: true,
dry: false
}),
new OptimizeCssAssetsPlugin(),
new MiniCssExtractPlugin({
filename: "[name].[hash:8].css",
chunkFilename: "[id].[hash:8].css"
}),
new ManifestPlugin(),
new BundleAnalyzerPlugin({
analyzerMode: enableBundleAnalyzer === true ? 'static' : 'disabled',
openAnalyzer: true,
}),
],
});

这里是我导入它们的地方：

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import App from './components/App';
import store from './app/store';
import './assets/styles/style.sass';
import './assets/styles/style.css';
import './index.scss';
import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';
import 'primeflex/primeflex.css';
import 'primereact/resources/themes/saga-blue/theme.css';
import '/src/assets/styles/customTheme.scss';
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
// Check if hot reloading is enable. If it is, changes won't reload the page.
// This is related to webpack-dev-server and works on development only.
if (module.hot) {
module.hot.accept();
}

其中一个问题回答了这个问题，说我需要url加载程序，但正如你所看到的，样板文件也包含了这个。

我希望我给了你足够的信息。提前谢谢。

Answer 1

我想我已经找到了答案。我需要从dev和prod配置的css加载程序规则中排除node_modules，因为通用配置正在处理这一点。由于存在2个冲突的css加载程序，因此引发了错误。