Angular + bootstrap

Sang heon lee·2022년 9월 13일
0

참고사이트

http://bootstrapk.com/getting-started/

https://onurmark.tistory.com/9

1. 프로젝트 생성

ng new templete-based-form

2. bootstrap 설치

npm install bootstrap

3. 전역 설정

// angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "templete-based-form": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/templete-based-form",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": [
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css" // This ⭐️⭐️⭐️⭐️
            ],
            "scripts": [
              // 아래 2줄의 정확한 용도는 모르겠으나 일단 동작은 위의 한줄만 적어도 동작은 한다. ⭐️⭐️⭐️⭐️
              "node_modules/bootstrap/dist/js/bootstrap.min.js",
              "node_modules/@popperjs/core/dist/umd/popper.min.js"
            ]
          },
          "configurations": {
            "production": {
              "budgets": [
profile
개초보

0개의 댓글