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

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

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

끝나고npm install그리고.npm run start모든 것이 잘 작동합니다.

저는 부트스트랩 4의 CSS와 같은 외부 CSS 모듈을 추가하고 싶습니다.(부트스트랩에 부트스트랩 로더가 있는 것은 알고 있지만, 이제 일반적인 해결책을 요구하기 때문에 npm을 통해 사용할 수 있는 다른 CSS 모듈일 수 있으므로 여기서 부트스트랩 4에 대해 생각해 주십시오.)

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

처음에 나는 그것이 추가하기에 충분하다고 생각했습니다.import 'bootstrap/dist/css/bootstrap.css';vendor.sys.ts 파일로 이동합니다.

하지만 그렇지는 않다.

적절한 해결책을 얻으려면 어떻게 해야 합니까?

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

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

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

편집: 작동 방식 - '~'은 웹 팩 구성에서 자산 폴더를 가리키는 별칭 집합입니다...그렇게 단순한..

편집 2: '~' 별칭을 사용하여 웹 팩을 구성하는 방법 예...이것은 웹팩 구성 파일에 있어야 합니다(일반적으로).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를 가져올 수 없습니다.

왜죠? 이 대사 때문에:

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
 },

은 첫째규내를부패의키서에지 CSS져가할때 안에 있는 CSS를 할 됩니다.node_modules은 두번규칙은에외가져온모든다 밖에서 모든 됩니다.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"
  ]

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

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

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