Webpack Bundle 文件没有 CSS 样式和 UI 组件答案

【问题标题】：Webpack Bundle file has no CSS style and UI componentWebpack Bundle 文件没有 CSS 样式和 UI 组件
【发布时间】：2019-01-22 20:04:40
【问题描述】：

我使用 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

然后在项目 2 中，我通过从 git 下载项目 1 导入了捆绑文件，并像这样使用组件：

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

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

javascript 渲染得很好。但是，它的 css 为零。没有 UI 库或没有自定义的 CSS 表。这整个组件只是变成了没有任何 CSS 的普通 javascrip。

我检查了页面。 div 仍然有 classNames，但这些 classNames 什么都不做。

我正在尝试找出原因以及如何解决它，感谢任何帮助

【问题讨论】：

标签： javascript css reactjs webpack

【解决方案1】：

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

【讨论】：

什么意思？我确实将 output.library 指定为 2FA
@aDev 你能把它放在a snippet 中，以便我可以根据我的假设解决这个问题吗？
你想让我也包含 webpack.config 还是只包含项目 1 中的主要组件
我们需要那里的 webpack 配置，这似乎是问题的根源
codesandbox.io/s/m75kp6wq0p。第一次使用沙盒，如有遗漏请见谅。如果您需要任何其他代码sn-p，请告诉我

【解决方案2】：

检查主 index.html 文件中的连接 main.css 文件。

那么你怎么做 MiniCssExtractPlugin 他们必须分开连接。

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

【讨论】：

如果我在 webpack-dev-server 中运行包。没事。但是，当我将它导出并在其他项目中使用时，它会出现问题。
在问题中明确说webpack。你说其他项目是什么意思？
我正在尝试将我的一个项目与 webpack 捆绑在一起并将其导入其他项目。当我尝试渲染捆绑项目时，UI 消失了。但是，如果我在捆绑项目本身上运行 webpack-dev-server，则 UI 呈现良好。