웹팩 angular2 응용 프로그램에 node_modules에서 CSS를 가져 오는 방법에

Question

은의 우리는 다음과 같은 스타터 팩으로 시작한다고 가정 해 봅시다 : https://github.com/angularclass/angular2-webpack-starter

npm install 후 npm run start 모든 것이 잘 작동합니다.

외부 CSS 모듈을 추가하고 싶습니다 (예 : 부트 스트랩 4의 CSS (및 CSS 만)). (부트 스트랩에 부트 스트랩 - 로더가 있다는 것을 알고 있지만 지금은 일반적인 해결책을 요구하고 있습니다. 부트 스트랩 4에 대해서는 npm을 통해 사용할 수있는 다른 CSS 모듈 일 수 있으므로 여기를 생각해보십시오.)

나는 NPM을 통해 부트 스트랩 설치 : npm install bootstrap@4.0.0-alpha.4 --save

먼저 나는 vendor.browser.ts 파일에 import 'bootstrap/dist/css/bootstrap.css';을 추가 충분하다 생각했다.

하지만 그렇지 않습니다.

적절한 해결책을 얻으려면 어떻게해야합니까? 내가 요구하고 있지 않다

솔루션 :

1. 는 "자산 폴더에 외부 CSS 모듈을 복사하고 거기에서 그것을 사용"나는 함께 작동하는 솔루션을 찾고 있어요
   • npm 패키지. 내가 전술 한 바와 같이, 나는 일반적인 솔루션을 찾고 있어요
   • "웹팩에 대한 부트 스트랩 로더를 사용하여", 부트 스트랩은 여기에만 예입니다.
2. 내가 위에서 언급 한 정확한 스타터 팩 솔루션을 찾고 있어요
   • "다른 스택을 사용합니다."

Answer 1

당신은 일부 내용을 변경하지 않고, 당신의 업체에 그 스택을 사용 파일을 어떤 CSS를 가져올 수 없습니다.

왜? 현실에서 당신이 원하는 것은 스타일 태그 공급 업체 CSS의 경우 그것은 단지, 문자열로 CSS를 가져 오는 것

import 'bootstrap/dist/css/bootstrap.css'; 

: 음이 선 때문이다. 때문에이 라인 encapsulation: ViewEncapsulation.None,의, 더 캡슐화 거기에없는 AppComponent에서

@Component({ 
    selector: 'app', 
    encapsulation: ViewEncapsulation.None, 
    styleUrls: [ 
    './app.component.css' // this why you import css as string 
    ], 

:

이

{ 
    test: /\.css$/, 
    loaders: ['to-string-loader', 'css-loader'] 
}, 

이 규칙은 당신의 구성 요소는 CSS 파일을 가져올 수 있습니다, 기본적으로이 : 당신이 config/webpack.commons.js 선택하면 당신은이 규칙을 찾을 수 있습니다 이는 모든 CSS 규칙이 앱에 전 세계적으로 적용된다는 것을 의미합니다.그래서 당신은 당신의 응용 프로그램 구성 요소에서 부트 스트랩 스타일을 가져올 수 있습니다

@Component({ 
    selector: 'app', 
    encapsulation: ViewEncapsulation.None, 
    styleUrls: [ 
    './app.component.css', 
    '../../node_modules/bootstrap/dist/css/bootstrap.css' 
    ], 

을 그러나 당신이 당신의 vendor.ts에 수입 주장이라면 새 로더를 설치해야합니다, npm i style-loader --save-dev이 웹팩이 페이지에 CSS를 삽입 할 수 있습니다. 그런 다음 당신은 당신의 webpack.common.js에 특정 규칙을 만들고 변경해야 하나 기존 :

{ //this rule will only be used for any vendors 
    test: /\.css$/, 
    loaders: ['style-loader', 'css-loader'], 
    include: [/node_modules/] 
}, 
{ 
    test: /\.css$/, 
    loaders: ['to-string-loader', 'css-loader'], 
    exclude: [/node_modules/] //add this line so we ignore css coming from node_modules 
}, 

만이 node_modules 두 번째 내부의 패키지에서, CSS를 가져올 때 적용됩니다 전나무 규칙 규칙은 외부에서 가져 오는 CSS에 적용됩니다. node_modules

Answer 2

@import '~bootstrap/dist/css/bootstrap.css';을 styles.css 파일에서 사용할 수 있습니다.

Answer 3

그래서 여기에 내가 가장 편리한을 찾을 angular-cli를 사용하여 다양한 CSS 파일을 가져올 수있는 방법입니다합니다 (~ 참고).

기본적으로 config에서 파일 (순서를 재정의하는 경우 순서가 중요 함)을 참조하면 angular-cli이 나머지를 처리합니다.

.angular-CLI :

"styles": [ 
    "../node_modules/font-awesome/css/font-awesome.min.css", 
    "../node_modules/primeng/resources/primeng.min.css", 
    "styles.css" 
    ] 

샘플 전체 설정은 다음과 같습니다 다음과 같은 예를 들어, 당신은 할 수있는 노드 모듈에서 스타일의 몇 가지를 포함 할 수 있습니다 .json

{ 
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 
    "project": { 
    "name": "my-angular-app" 
    }, 
    "apps": [ 
    { 
     "root": "src", 
     "outDir": "dist", 
     "assets": [ 
     "assets", 
     "favicon.ico" 
     ], 
     "index": "index.html", 
     "main": "main.ts", 
     "polyfills": "polyfills.ts", 
     "test": "test.ts", 
     "tsconfig": "tsconfig.app.json", 
     "testTsconfig": "tsconfig.spec.json", 
     "prefix": "app", 
     "styles": [ 
     "../node_modules/font-awesome/css/font-awesome.min.css", 
     "../node_modules/primeng/resources/primeng.min.css", 
     "styles.css" 
     ], 
     "scripts": [], 
     "environmentSource": "environments/environment.ts", 
     "environments": { 
     "dev": "environments/environment.ts", 
     "prod": "environments/environment.prod.ts" 
     } 
    } 
    ], 
    "e2e": { 
    "protractor": { 
     "config": "./protractor.conf.js" 
    } 
    }, 
    "lint": [ 
    { 
     "project": "src/tsconfig.app.json", 
     "exclude": "**/node_modules/**" 
    }, 
    { 
     "project": "src/tsconfig.spec.json", 
     "exclude": "**/node_modules/**" 
    }, 
    { 
     "project": "e2e/tsconfig.e2e.json", 
     "exclude": "**/node_modules/**" 
    } 
    ], 
    "test": { 
    "karma": { 
     "config": "./karma.conf.js" 
    } 
    }, 
    "defaults": { 
    "styleExt": "scss", 
    "component": {} 
    } 
}