.NET Core 프로젝트(MVC든 아니든 상관없음)를 템플릿 프로젝트에 기반해서 시작하면 bower 종속성 관리 프로그램에 기반해서 Bootstrap이랑 jQuery가 기본으로 탑재되어 있는데요, 일단 [Bower는 지원이 중단된 시스템]이어서 [LibMan으로 갈아타야]하고, Bootstrap 은 최신 버전이 4.1.x 대여서 역시 갈아타야 합니다. 특히 Bootstrap의 경우엔 버전 3과 4의 시스템이 많이 차이가 나서 기본으로 작성되어있는 NavBar도 변환을 거쳐줘야 합니다.
-
기존 라이브러리 제거
프로젝트/wwwroot/lib에 /bootstrap, /jquery/ 등이 있는데 모두 삭제합니다.
-
LibMan 이용하기
솔루션 관리자에서 프로젝트를 마우스 오른쪽 클릭한 후 추가->클라이언트 라이브러리 추가 로 들어갑니다.
여기서 twitter-bootstrap을 입력한 후 탭을 누르면 최신 버전이 선택됩니다. 그런 후 설치를 클릭합니다. jQuery 같은것도 똑같이 해줍니다.
솔루션 관리자에서 “libman.json”을 마우스 오른쪽 클릭한 후 “빌드에 클라이언트 쪽 라이브러리 복원 사용”을 선택해줍니다. 이렇게 하면 빌드때마다 해당 라이브러리를 가져옵니다.
-
cshtml 파일 갱신
기본적으로 ASP tag helper를 이용해서 개발 환경일 때는 기본 라이브러리 파일을 사용하고 배포나 스테이징 등 다른 환경일 때는 최소화된 버전인 min 파일을 사용하게 되어있는데 이 부분들을 고쳐줘야 합니다.
~/lib/bootstrap/dist/css/bootstrap.css 처럼 되어있는 라이브러리 경로에서 dist/를 빼서 ~/lib/bootstrap/dist/css/bootstrap.css처럼 만들어줍니다.
bootstrap의 경우에는 경로명에서 bootstrap을 twitter-bootstrap로 바꿔줍니다.
exclude=”Development” 태그 내부에 있는 link 태그가 가리키는 라이브러리 주소를 cdn URI에서 프로젝트에 있는 min 파일의 경로로 바꿔줍니다. 로컬경로로 바꿔줘서 asp-fallback 처리도 할 필요 없으므로 이쪽 태그도 전부 없앱니다.
|
1 2 3 |
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css" asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css" asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" /> |
변경 전
|
1 |
<link rel="stylesheet" href="~/lib/twitter-bootstrap/css/bootstrap.min.css"/> |
변경 후
Bootstrap 3.x 버전의 문법과 Bootstrap 4.x 버전의 문법이 많이 달라서 변환을 해줘야 합니다. [upgrade-bootstrap.bootply.com]를 이용하면 적당히 변환해주므로 참고하세요.
예) Views/Shared/_Layout.cshtml 파일 내부에 있는 nav 태그
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">WebApplication3</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li> <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li> <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li> </ul> </div> </div> </nav> |
변경 전
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<nav class="navbar navbar-dark bg-dark fixed-top navbar-expand-md"> <div class="container"> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> ☰</button> <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">WebApplication3</a> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="nav-item"><a asp-area="" asp-controller="Home" asp-action="Index" class="nav-link">Home</a> </li> <li class="nav-item"><a asp-area="" asp-controller="Home" asp-action="About" class="nav-link">About</a> </li> <li class="nav-item"><a asp-area="" asp-controller="Home" asp-action="Contact" class="nav-link">Contact</a> </li> </ul> </div> </div> </nav> |
변경 후
만약 변경 후에 코드 검사기에서 파란 밑줄로 Unknown CSS class 라고 나오는 class가 있다면 지워주면 됩니다.
이렇게 하면 성공적으로 Bower에서 LibMan으로 교체하게 되고 Bootstrap 3.x로 작성된 기본 코드도 4.x 코드로 변환된 상태로 본인의 프로젝트를 시작할 수 있게 됩니다.