Angular2 webpack : 부트 스트랩을 가져 오는 방법 CSS

Question

angular2-webpack-starter을 사용하여 프로젝트를 빌드하고 부트 스트랩도 사용하고 싶습니다.

을 npm install ng2-bootstrap --save으로 설치합니다. ng2-bootstrap에는 몇 가지 지시문 만 있기 때문에 스타일을 지정하기 위해서는 부트 스트랩의 "실제".css 파일이 필요합니다 (그러나 작성자가 가지고 있다고 가정하는 것 같습니다). 따라서 부트 스트랩을 npm install bootstrap --save으로 설치합니다.

이제 내 질문은 ng2-bootstrap이 사용할 수 있도록 "실제"부트 스트랩 .css 파일을 내 프로젝트로 가져 오는 방법입니다. 내 src/assets/css 폴더에

1. 사본 node_modules/bootstrap/dist/css 폴더에서 bootstrap.min.css 파일 내 index.html에 <link href="assets/css/bootstrap.min.css" rel="stylesheet">을 추가

   나는 여러 가지 방법을 시도했다. 이 방법은 효과가 있지만 내 우려는 bootstrap.min.css 파일이 더 이상 npm에 의해 관리되지 않는다는 것입니다. 앞으로 수동으로 업데이트해야합니다.

2. 또 다른 시도가 내 app.component.ts

   같은

   스타일에서 그것을 요구한다 : [ 가 ('./ app.style.css')를 필요로 필요 ('../../ node_modules/부트 스트랩/DIST /css/bootstrap.min.css ') ]을

있지만 해결 될 수 없습니다.

3. 마지막 시도는 import '@angular/core';과 같이 import 'bootstrap'; ~ vendor.browser.ts을 추가하는 것입니다. 그러나 역시 실패했다. bootstrap은 내가 쉽게 가져올 수있는 @angular2/core과 같은 패키지가 아닙니다.

그래서, 내 질문은 ng2-bootstrap 내 프로젝트의 다른 구성 요소에서 사용할 수 있으며 또한 NPM을 사용하여 업그레이드 할 수 있도록 웹팩에/부하 bootstrap을 가져 오는 방법에 온다.

Answer 1

import 'bootstrap';은 CSS가 아닌 부트 스트랩의 JS 진입 점을 나타냅니다. 숫자 3을

import 'bootstrap/assets/css/bootstrap.min.css'; 

대신 사용해보십시오.

Answer 2

은 사용에 의해 CSS 로더 다운로드 CSS 로더를 사용해야합니다, 난 내 각 2에서 몇 가지 테스트를했고, 그것은 당신이 어떤 로더 당신의 웹팩에서 다음

npm install css-loader style-loader url-loader file-loader --save-dev 

을 필요로 작동합니다.당신은 당신이 와 함께 사용하려고하는 부트 스트랩 파일을로드 할 수 있습니다이

loaders: [ 
    {test: /\.css$/, loader: ['style-loader', 'css-loader']}, 
    {test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" }, 
    {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" }, 
    {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" }, 
    {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" }, 
    {test: /\.html$/, loader: 'raw',exclude: /node_modules/}, 
    {test : /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,loader : 'file-loader'}, 
] 

같은 로더를 사용할 수 있습니다 config (설정) 당신은

import "bootstrap/dist/css/bootstrap.css"; 
    @Component({ 
     selector: "sg-nav", 
     template: ` 
        <div class="container"></div>`, 
    }) 
    export class NavComponent { 
     public name: string = "MR.Js"; 
    } 

here you can read how it works with css loader

같은 클래스에서 부트 스트랩을 사용할 수 있습니다 working example with bootstrap

Answer 3

아마도 이것을 시도 할 수 있습니다.

import 'bootstrap'; 
import '!style-loader!css-loader!bootstrap/assets/css/bootstrap.min.css'; 

첫 번째 '가져 오기'는 '부트 스트랩'모듈을 가져옵니다 (bootstrap.js를 참조 할 수 있음).

두 번째 사람은 css를 가져올 수 있습니다.

하고 webpack.config.js에서 당신이 로더 사용할 수 있습니다

Answer 4

당신은 웹팩를 통해 그것을 설정할 수 있습니다, 그러나 이것은 CSS-로더, 스타일 로더를 설치하고 webpack.config.js (에 로더를 추가 필요 , url-loaders, file-loaders)를 입력 한 다음 vendor.ts에 bootstrap.min.css 파일과 부트 스트랩 파일을 가져옵니다.

나는 이것이 매우 장황하다고 생각한다. 오히려 위보다, 당신은 단지 (예 : NPM을 사용)를 설치 수 및

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 

Answer 5

더 좋은 방법이있을 수 있습니다 당신의 index.html을에 스크립트 아래의 한 줄 (축소 된 웹팩 JS 파일)을 추가, 하지만 내 ng2 프로젝트에서 CSS 관련 libs (예 : bootstrap, font-awesome)를 처리하기 위해 bower을 사용하고 있습니다. 이 같은 (예를 들어) src/assets/lib :

은에 파일을 저장하기 위해 .bowerrc을 설정

이

{ 
    "directory": "src/assets/lib", 
} 

그런 NPM과 정자를 설치합니다.

npm install bower --save-dev

그리고 설치할 수있는 부트 스트랩과 함께 :

bower install bootstrap --save 추가 (하고 버전 번호를 고정 할 경우)에 bower.json 파일.

이 솔루션의 좋은 점은 정자 이미로,

그런 다음 수동으로 index.html에 링크를 추가 할 수 있습니다 (이 자동으로 lib 디렉토리에 jQuery를 추가 할 예를 들어) 당신을 위해 모든 종속성을 처리하다 한 : <link rel="stylesheet" href="./assets/lib/bootstrap/dist/css/bootstrap.min.css"/>

나는 나의 .gitignore에 src/assets/lib 폴더를 추가 ... 그리고/배포를 설치, 나는 bower install를 실행합니다.