반응형
vue 전원이 켜진 Chrome 확장 내에서 npm을 사용하여 부트스트랩 및 종속성을 로드하는 방법
웹 팩, vue 및 vuex를 사용하여 간단한 크롬 확장을 만드는 방법을 배우고 있습니다.Chrome 확장 기능으로 socket.io 이벤트를 추적하기 위해 돌연변이를 사용하는 방법을 알아보려고 하는데 확장 기능 내부에 부트스트랩 4를 로드하는 데 문제가 있습니다.노드 모듈 폴더가 있는 경로를 사용했지만 파일을 찾을 수 없어 부트스트랩을 로드할 수 없습니다.누가 나를 도와줄 수 있나요?npm을 사용하여 부트스트랩을 설치했습니다.
index.displaces를 표시합니다.
<!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>
추가하기를 권장합니다.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"
언급URL : https://stackoverflow.com/questions/61682468/how-to-load-bootstrap-and-dependencies-with-npm-inside-vue-powered-chrome-extens
반응형
'programing' 카테고리의 다른 글
| Eclipse - 디버거가 중단점에서 멈추지 않음 (0) | 2023.01.02 |
|---|---|
| PHP 연결 실패: SQLSTATE[HY000] [2002] 접속 거부 (0) | 2023.01.02 |
| "assert" 키워드의 역할은 무엇입니까? (0) | 2023.01.02 |
| 파일 핸들을 사용하여 파일 이름 가져오기(또는 파일 삭제) (0) | 2023.01.02 |
| JavaScript 개체: 이름으로 변수 속성에 문자열로 액세스합니다. (0) | 2023.01.02 |