为啥我不能将 primereact 样式导入 webpack 4 react 样板？

Posted 2023-02-21

【中文标题】为啥我不能将 primereact 样式导入 webpack 4 react 样板？

【英文标题】：Why can't I import primereact styles to webpack 4 react boilerplate?为什么我不能将 primereact 样式导入 webpack 4 react 样板？

【发布时间】：2021-06-15 03:56:13

【问题描述】：

我在运行应用程序时收到此错误：

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',
    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-loader 来回答这个问题，但是如您所见，样板文件也包含它。

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

【参考方案1】：

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