[twitter-bootstrap] angular-cli 프로젝트에 부트 스트랩을 추가하는 방법


Answers

핵심 단어> 글로벌 라이브러리 설치 ( https://github.com/angular/angular-cli 를 보면 답을 찾는 데 도움이됩니다.

자신의 문서에 따라 다음 단계를 수행하여 부트 스트랩 라이브러리를 추가 할 수 있습니다.

먼저 npm에서 부트 스트랩을 설치하십시오.

npm install bootstrap@next

그런 다음 필요한 스크립트 파일을 angular-cli.json 파일의 apps [0] .scripts에 추가합니다.

 "scripts": [
    "../node_modules/bootstrap/dist/js/bootstrap.js"
    ],

마지막으로 apps [0] .styles 배열에 부트 스트랩 CSS를 추가하십시오.

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.css"
    ],

서브를 다시 실행하면 부트 스트랩 4가 앱에서 작동하고 있어야합니다.

이것은 최상의 해결책입니다. 그러나 서비스를 다시 시작하지 않으면 결코 작동하지 않습니다. 이 마지막 작업을 수행하는 것이 좋습니다.

Question

angle-cli 1.0.0-beta.5 (노드 v6.1.0)로 생성 된 앱에서 부트 스트랩 4 (4.0.0-alpha.2)를 사용하고 싶습니다.

부트 스트랩과 npm과의 의존성을 얻은 후, 우리의 첫 번째 접근법은 angular-cli-build.js 이들을 추가하는 것이 angular-cli-build.js :

  'bootstrap/dist/**/*.min.+(js|css)',  
  'jquery/dist/jquery.min.+(js|map)',  
  'tether/dist/**/*.min.+(js|css)',

index.html 에서 가져 오기

  <script src="vendor/jquery/dist/jquery.min.js"></script>
  <script src="vendor/tether/dist/js/tether.min.js"></script>
  <link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css">
  <script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>

이것은 ng serve 와 함께 잘 동작하지만, -prod 플래그를 사용하여 빌드를 생성하자마자 모든 의존성이 dist/vendor (깜짝!)에서 사라졌습니다.

angular-cli로 생성 된 프로젝트에서 이러한 시나리오 (예 : 부트 스트랩 스크립트로드)를 처리하기위한 방법은 무엇입니까?

우리에게는 다음과 같은 생각이 있었지만 우리는 어떤 길로 갈지 정말로 모른다.

  • CDN을 사용합니까? 그러나 우리는 이러한 파일을 제공하여 사용 가능함을 보장합니다.

  • 우리의 ng build -prod 후에 의존성을 dist/vendor 복사 ng build -prod ? 그러나 그것은 앵글 클라이 (Angi-cli)가 빌드 부분을 '돌봐 줘서'제공해야하는 무언가처럼 보입니다.

  • src / system-config.ts에 jquery, bootstrap 및 tether를 추가하고 main.ts의 번들로 가져옵니다. 그러나 그것은 우리가 응용 프로그램의 코드에서 명시 적으로 사용하지 않을 것이라는 점을 고려할 때 잘못된 것처럼 보입니다 (예 : moment.js 또는 lodash와 같은 것)







angular-cli를 사용할 경우의 작업 예제 :

npm i bootstrap-schematics
ng generate bootstrap-shell -c bootstrap-schematics -v 4
npm install

css 및 scss에서 작동합니다. 부트 스트랩 v3 및 v4를 사용할 수 있습니다.

부트 스트랩 회로도에 대한 자세한 내용은 here 를 참조 here .




  1. 부트 스트랩 설치

     npm install bootstrap@next
    

2.angular-cli.json에 코드 추가 :

      "styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/tether/dist/js/tether.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js"
      ],
  1. 마지막으로 코드 style.scss에 bootstrap.css를 추가하십시오.

    @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
    
  2. 로컬 서버 다시 시작




  1. bash에서 실행 npm install ng2-bootstrap bootstrap --save
  2. angular-cli.json 에서 다음을 추가 / 변경하십시오.
    "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ],



이것은 매우 혼란스러워졌고 여기에 대한 답변은 완전히 혼합되어 있습니다. 저는 공식 ui-team 과 함께 BS4 repo에 대해 제안 할 것입니다. (NG-Bootstrap을위한 많은 repos가 있습니다.

BS4를 얻으려면 https://github.com/ng-bootstrap/ng-bootstrap 의 안내를 따르십시오.

lib에서 인용 :

이 라이브러리는 ui-bootstrap 팀에 의해 처음부터 빌드됩니다. TypeScript를 사용하고 Bootstrap 4 CSS 프레임 워크를 타겟팅하고 있습니다.

부트 스트랩 4와 마찬가지로이 라이브러리는 진행중인 작업입니다. 우리가 구현하고있는 모든 것을보기 위해 이슈 목록을 확인하십시오. 자유롭게 의견을 말하십시오.

그저 복사 할 수있는 내용을 붙여 넣기 만하면됩니다.

npm install --save @ng-bootstrap/ng-bootstrap

설치가 완료되면 메인 모듈을 가져와야합니다 :

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

유일한 나머지 부분은 응용 프로그램 모듈에 가져온 모듈을 나열하는 것입니다. 정확한 메소드는 (NgbModule.forRoot () 통지와 비슷한 코드로 끝나야하는 루트 (최상위) 모듈에 대해 약간 다릅니다.

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

응용 프로그램의 다른 모듈은 간단히 NgbModule을 가져올 수 있습니다.

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [NgbModule, ...], 
})
export class OtherModule {
}

이것은 지금까지 가장 일관된 행동으로 보인다.




처음에는 이러한 명령으로 테더, jquery 및 부트 스트랩을 설치해야합니다.

npm i -S tether
npm i -S jquery
npm i -S bootstrap@4.0.0-alpha.4 

angular-cli.json 파일에 다음 행을 추가 한 후

  "styles": [
    "styles.scss",
    "../node_modules/bootstrap/scss/bootstrap-flex.scss"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ]



angular-cli 및 css를 사용할 경우의 작업 예제 :

1. 부트 스트랩 설치

npm은 부트 스트랩 테더 jquery - save를 설치합니다.

2.angular-cli.json에 추가하십시오.

  "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ],



부트 스트랩을 포함하는 방법에 대한 공식 (각도 cli 팀) 이야기는 아직까지 아무도 언급하지 않았으므로 : https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

Bootstrap 포함

Bootstrap 은 Angular 프로젝트에서 사용할 수있는 인기있는 CSS 프레임 워크입니다. 이 안내서는 Angular CLI 프로젝트에 부트 스트랩을 추가하고 부트 스트랩을 사용하도록 구성하는 과정을 안내합니다.

CSS 사용

시작하기

새 프로젝트 만들기 및 프로젝트 탐색

ng new my-app
cd my-app

부트 스트랩 설치

새 프로젝트를 만들고 준비하면 다음으로 종속성으로 프로젝트에 부트 스트랩을 설치해야합니다. --save 옵션을 사용하면 종속성이 package.json에 저장됩니다.

# version 3.x
npm install bootstrap --save

# version 4.x
npm install bootstrap@next --save

프로젝트 구성

이제 프로젝트가 설정되었으므로 부트 스트랩 CSS를 포함하도록 구성해야합니다.

  • 프로젝트의 루트에서 .angular-cli.json 파일을 엽니 다.
  • 속성 apps 에서 해당 배열의 첫 번째 항목이 기본 응용 프로그램입니다.
  • 외부 전역 스타일을 응용 프로그램에 적용 할 수있는 속성 styles 이 있습니다.
  • bootstrap.min.css 의 경로를 지정하십시오.

완료되면 다음과 같이 보입니다.

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],

참고 : .angular-cli.json 을 변경하면 구성 변경 사항을 선택하기 ng serve 를 다시 시작해야합니다.

테스트 프로젝트

app.component.html 열고 다음 마크 업을 추가하십시오.

<button class="btn btn-primary">Test Button</button>

응용 프로그램이 구성된 상태에서 응용 프로그램을 개발 모드로 실행하려면 ng serve 를 실행합니다. 브라우저에서 응용 프로그램 localhost:4200 이동하십시오. 부트 스트랩 스타일 단추가 나타나는지 확인하십시오.

SASS 사용

시작하기

새 프로젝트 만들기 및 프로젝트 탐색

ng new my-app --style=scss
cd my-app

부트 스트랩 설치

# version 3.x
npm install bootstrap-sass --save

# version 4.x
npm install bootstrap@next --save

프로젝트 구성

src/ 에 빈 파일 _variables.scss 를 만듭니다.

bootstrap-sass 사용하는 경우 _variables.scss 다음을 추가하십시오.

$icon-font-path: '../node_modules/bootstrap-sass/assets/fonts/bootstrap/';

styles.scss 에서 다음을 추가하십시오.

// version 3
@import 'variables';
@import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';

// version 4
@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';

테스트 프로젝트

app.component.html 열고 다음 마크 업을 추가하십시오.

<button class="btn btn-primary">Test Button</button>

응용 프로그램이 구성된 상태에서 응용 프로그램을 개발 모드로 실행하려면 ng serve 를 실행합니다. 브라우저에서 응용 프로그램 localhost:4200 이동하십시오. 부트 스트랩 스타일 단추가 나타나는지 확인하십시오. 변수를 사용하려면 _variables.scss 열고 다음을 추가하십시오.

$brand-primary: red;

글꼴 색이 변경된 것을 보려면 브라우저를 반환하십시오.




해당 프로젝트 디렉토리에서 터미널 / 명령 프롬프트를 열고 다음 명령을 입력하십시오.

npm install --save bootstrap

그런 다음 .angular-cli.json 파일을 엽니 다.

"styles": [ "styles.css" ],

그걸로 바꿔라.

 "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "styles.css"
  ],

모두 완료되었습니다.




Related