[ASP.NET Core] 패키지 관리자와 부트스트랩 사용

소개

이번에는 ASP.NET Core 프로젝트에서 부트스트랩의 CSS를 사용해 보도록 하겠습니다.
그리고 패키지 관리자(ex. NuGet, NPM 등)로 부트스트랩 패키지를 추가하고 싶습니다.

CLI 프로젝트 템플릿

예를 들어 MVC 템플릿으로 새 프로젝트를 만들면 부트스트랩 패키지가 프로젝트에 포함됩니다.

dotnet new mvc -n MvcSample

그러나 패키지 관리자가 관리하지 않습니다.
"wwwroot/lib/bootstrap/dist"에 직접 저장됩니다.


그래서 다른 방법을 찾아야 합니다.

누겟

NuGet 패키지 관리자로 부트스트랩을 설치할 수 있습니다.

Download · Bootstrap

하지만 내 ASP.NET Core 프로젝트에서 설치 후 부트스트랩 패키지 파일을 가져올 수 없습니다.
그리고 나는 그것을 사용하는 방법을 찾을 수 없었습니다.

그래서 Bootstrap을 사용하기 위해 NuGet을 사용하는 것을 포기했습니다.

NPM + PostCSS

NPM으로 부트스트랩을 설치할 수도 있습니다.

npm install --save bootstrap

패키지 파일은 "node_modules"디렉토리에 있습니다.
하지만 어떻게 사용할 수 있습니까?

기본적으로 ASP.NET Core는 "node_modules"디렉터리를 게시하지 않습니다.
그리고 나도 그러고 싶지 않습니다.

파일을 "wwwroot"디렉토리에 수동으로 복사해야 합니까?
나도 그러고 싶지 않다.

그래서 저는 PostCSS를 사용하여 부트스트랩 파일을 가져오기로 결정했습니다.

postcss 가져오기

"postcss-import"로 CSS 파일을 가져올 수 있습니다.

패키지.json

{
    "browserslist": [
        "last 2 version"
    ],
    "dependencies": {
        "@microsoft/signalr": "^5.0.4",
        "autoprefixer": "^10.2.5",
        "bootstrap": "^4.6.0",
        "postcss": "^8.2.8",
        "postcss-cli": "^8.3.1",
        "postcss-import": "^14.0.0",
        "ts-loader": "^8.0.17",
        "tsc": "^1.20150623.0",
        "typescript": "^4.2.3",
        "webpack": "^5.24.4",
        "webpack-cli": "^4.5.0"
    },
    "scripts": {
        "css": "npx postcss postcss/*.css -c postcss.config.js -d wwwroot/css -w"
    }
}

postcss.config.js

module.exports = {
    plugins: [
      require("postcss-import")(),
      require("autoprefixer")({
        "grid": true
      }),
    ]
  }

코드를 추가하지 않기 때문에 Bootstrap CSS 파일만 가져옵니다.

main.page.css

@import "../node_modules/bootstrap/dist/css/bootstrap.min.css"

이제 "npm run css"명령을 실행한 후 부트스트랩 CSS 파일을 사용할 수 있습니다.

전에

후에