webpack angular2 앱의 node_modules에서 CSS를 가져 오는 방법

webpack angular2 앱의 node_modules에서 CSS를 가져 오는 방법

---

다음 스타터 팩으로 시작한다고 가정 해 봅시다 : https://github.com/angularclass/angular2-webpack-starter

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

예를 들어 부트 스트랩 4의 CSS (및 CSS 만)와 같은 외부 CSS 모듈을 추가하고 싶습니다. (부트 스트랩에 부트 스트랩 로더가 있다는 것을 알고 있지만 이제는 일반적인 솔루션을 요청하고 있으므로 npm을 통해 사용할 수있는 다른 CSS 모듈이 될 수 있으므로 여기서 부트 스트랩 4에 대해 생각해보십시오.)

npm을 통해 부트 스트랩을 설치합니다. npm install bootstrap@4.0.0-alpha.4 --save

먼저 import 'bootstrap/dist/css/bootstrap.css';vendor.browser.ts 파일 에 추가하는 것으로 충분하다고 생각했습니다 .

하지만 그렇지 않습니다.

적절한 솔루션을 얻으려면 어떻게해야합니까?

내가 요구하지 않는 솔루션 :

1. "외부 CSS 모듈을 자산 폴더에 복사하고 거기에서 사용"
   • npm 패키지와 함께 작동하는 솔루션을 찾고 있습니다.
2. "웹팩에 부트 스트랩 로더 사용"
   • 위에서 설명한대로 일반적인 솔루션을 찾고 있는데 부트 스트랩은 여기에있는 예일뿐입니다.
3. "다른 스택 사용"
   • 위에서 언급 한 정확한 스타터 팩에서 솔루션을 찾고 있습니다.

---

약간의 변경 없이는 해당 스택을 사용 하여 공급 업체 파일로 CSS를 가져올 수 없습니다 .

왜? 이 라인 때문에 글쎄요 :

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

실제로 원하는 것은 스타일 태그의 공급 업체 CSS 인 경우에만 CSS를 문자열로 가져 오는 것입니다. 확인 config/webpack.commons.js하면 다음 규칙을 찾을 수 있습니다.

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

이 규칙을 사용하면 구성 요소가 기본적으로 다음과 같이 CSS 파일을 가져올 수 있습니다.

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

AppComponent에는 캡슐화가 없습니다.이 줄 encapsulation: ViewEncapsulation.None,은 모든 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
 },

firs 규칙은 CSS를 가져 오려고 할 때만 적용되며 node_modules, 두 번째 규칙 내부 의 모든 패키지 에서 외부에서 가져온 모든 CSS에 적용됩니다.node_modules

---

@import '~bootstrap/dist/css/bootstrap.css';styles.css 파일에서 사용하여 가능 합니다. ( ~ 참고 )

편집 : 작동 방식- '~'는 자산 폴더를 가리키는 webpack 구성에 설정된 별칭입니다. 간단합니다.

편집 2 : '~'별칭을 사용하여 webpack을 구성하는 방법에 대한 예 ... 이것은 webpack 구성 파일 (일반적으로 webpack.config.js) 에 있어야합니다 ...

// look for the "resolve" property and add the following...
// you might need to require the asset like '~/bootsrap/...'
resolve: {
  alias: {
    '~': path.resolve('./node_modules')
  }
}

---

그래서 여기 내가 가장 편리한 것을 CSS사용하여 다양한 파일 을 가져 오는 방법이 angular-cli있습니다.

기본적으로 구성에서 CSS파일을 참조 할 수 있으며 (무시할 경우 순서가 중요합니다) angular-cli나머지는 처리합니다. 예를 들어, 다음과 같이 수행 할 수있는 노드 모듈의 두 가지 스타일을 포함 할 수 있습니다.

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

샘플 전체 구성은 다음과 같습니다.

.angular-cli.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": {}
  }
}

ReferenceURL : https://stackoverflow.com/questions/40071845/how-to-import-css-from-node-modules-in-webpack-angular2-app