如何在vue powered chrome扩展中使用npm加载bootstrap和依赖关系。

问题描述 投票：0回答：1

我正在学习如何使用webpack、vue和vuex来创建一个简单的chrome扩展。当我试图找出如何在我的chrome扩展中使用突变来跟踪socket.io事件时，我在扩展中加载bootstrap 4时遇到了问题。我使用了node modules文件夹所在的路径，但我得到了一个未找到的文件，我无法加载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>
vue.js npm google-chrome-extension vuex
1个回答
1
投票

我建议添加 CopyWebpackPlugin 到你的webpack配置中，这样你就可以把node模块拉到你的发行版中。

参考。https:/webpack.js.orgpluginscopy-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"

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.