Файл Webpack Bundle не имеет стиля CSS и компонента пользовательского интерфейса

Question

Я создал свой проект (Проект 1), используя CRA.В проекте 1 используется некоторая библиотека пользовательского интерфейса, такая как «Reactstrap» и настраиваемый лист CSS.это хорошо само по себе.Затем я связываю основной файл компонента с помощью веб-пакета и пытаюсь экспортировать его в другой проект (проект 2).

Для моего проекта веб-пакет выглядит так:

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 - это основной пользовательский интерфейс, в котором есть все:

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

Объединение проекта 1 создает 3 файла в папке dist: 2FA.js (основной файл js), index.html и main.css

Затем в Project 2 я импортировал файл комплекта, загрузив Project 1 из git, и использовал компонент следующим образом:

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

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

Javascript отрисовался нормально.Тем не менее, он имеет ноль CSS в нем.Нет пользовательского интерфейса библиотеки или нет настроенного листа CSS.Весь этот компонент стал просто javascrip без CSS.

Я проверил страницу.У div'ов еще есть classNames, но эти classNames ничего не делают.

Я пытаюсь выяснить, почему и как это исправить, любая помощь приветствуется

Answer 1

Проверьте ваш файл main.css соединения в главном файле index.html.

Итак, как вы делаете MiniCssExtractPlugin, они должны быть подключены отдельно.

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

Answer 2

Вам нужно будет импортировать связанную библиотеку по имени, указанному в output.library в вашей конфигурации WebPack, а именно 2FA.