Question

我使用CRA创建了我的项目（项目1）。项目1使用了一些Ui库，例如“ Reactstrap”和自定义的CSS表。它本身就可以了。然后，我使用webpack捆绑了主要组件文件，并尝试将其导出到其他项目（项目2）。

我的项目的Webpack看起来像这样：

module.exports = [
    {
        /*Client Side*/
        entry: './src/App.js',
        output:{
            path: path.resolve(__dirname, 'dist'),
            filename: "2FA.js",
            libraryTarget: 'umd',
            library: '2FA'
        },
        module: {
            rules: [
                {
                    test: /\.(js|jsx)$/,
                    exclude: /node_modules/,
                    use: {
                        loader: "babel-loader"
                    }
                },
                {
                    test: /\.html$/,
                    use: {
                        loader: "html-loader",
                        options: { minimize: true }
                    }
                },
                {
                    test: /\.css$/,
                    use: [MiniCssExtractPlugin.loader,"css-loader"]
                }
            ]
        },
        plugins: [
            new HtmlWebPackPlugin({
                template: "./public/index.html",
                filename:"./index.html"
            }),
            new MiniCssExtractPlugin({
                filename: "[name].css",
                chunkFilename:"[id].css"
            })
        ]
    } 
]

目标条目App.js是其中包含所有内容的主要UI：

export default class TwoFA extends React.Component{
  render() {
    return (
      <div>
          /* All the staff */
      </div>
    );
  }
}

捆绑项目1在dist文件夹中生成3个文件：2FA.js（主js文件），index.html和main.css

然后在Project 2中，我通过从git下载Project 1导入了捆绑文件，并使用如下组件：

import TwoFA from 'my-app/dist/2FA'

ReactDOM.render(<TwoFA />, document.getElementById('root'));

JavaScript正常显示。但是，它的CSS值为零。没有UI库或没有自定义的CSS工作表。整个组件只是没有任何CSS的原始javascrip。

我检查了页面。 div仍然具有className，但是这些className没有任何作用。

我正在尝试找出原因和解决方法，感谢您的帮助

Answer 1

您将需要在WebPack配置中以output.library中给出的名称导入捆绑库，即2FA。

Answer 2

在主index.html文件中插入连接main.css文件。

所以您如何操作MiniCssExtractPlugin，必须将它们分别连接。

<link rel="stylesheet" href="./main.css">

Webpack捆绑包文件没有CSS样式和UI组件

2 个答案: