Как загрузить bootstrap и зависимости с npm внутри vue с питанием chrome расширением - PullRequest
Новая
       43

Как загрузить bootstrap и зависимости с npm внутри vue с питанием chrome расширением

1 голос
/ 08 мая 2020

Я учусь использовать webpack, vue и vuex для создания простого chrome расширения. Пока я пытаюсь понять, как использовать мутации для отслеживания событий socket.io в моем расширении chrome, у меня возникла проблема с загрузкой bootstrap 4 внутри расширения. Я использовал путь, по которому находится папка модулей узлов, но я получаю файл, который не найден, и я не могу загрузить bootstrap. Может кто-нибудь помочь мне? Я использовал npm для установки bootstrap.

index. html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Here I'm Messenger</title>
  <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">

  <% if (NODE_ENV === 'development') { %>
  <!-- Load some resources only in development environment -->
  <% } %>
</head>
<body>
  <div id="app"></div>
  <script src="index.js"></script>
</body>
</html>

1 Ответ

1 голос
/ 09 мая 2020

Я бы порекомендовал добавить CopyWebpackPlugin в конфигурацию вашего веб-пакета, чтобы вы могли вставлять модули узлов в свой дистрибутив.

ссылка: https://webpack.js.org/plugins/copy-webpack-plugin/

const plugins = [
  new CopyWebpackPlugin(
    [
      { from: 'node_modules/bootstrap/dist/css/bootstrap.min.css', to: './dist/css/' },
    ],
  ),
];

После этого вы сможете обновить href, чтобы использовать копию в папке dist href="/css/bootstrap.min.css"

...