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

问题描述

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

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

我没有修改任何 common、dev 和 prod webpack。我已经阅读了围绕此发布的其他 2 个问题，但没有一个答案有效。 为方便起见，我将发布 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',stats: 'errors-only'
    },module: {
        rules: [
            {
                test: /\.css$/,use: [
                    { loader: "style-loader" },{ loader: mapStyle ? "css-loader?sourceMap" : "css-loader" }
                ]
            },{
                test: /\.s(a|c)ss$/,{ 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',use: [
                    { loader: MiniCssExtractPlugin.loader },{ loader: "css-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-loader，但正如您所见，样板文件也包含该内容。

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

解决方法

我想我找到了答案。我需要从 dev 和 prod 配置的 css 加载器规则中排除 node_modules，因为通用配置正在处理它。抛出错误是因为有 2 个冲突的 css 加载器。