webpack angular2 uygulamasında node_modules gelen CSS ithal etmek nasıl

Question

en aşağıdaki başlangıç ​​paketi ile başlamak olduğunu varsayalım: https://github.com/angularclass/angular2-webpack-starter

npm install sonra ve npm run start her şey çalışıyor.

Harici bir css modülü eklemek istiyorum, örneğin bootstrap 4'in css (ve sadece css). (Ben bootstrap bir bootstrap-loader olduğunu biliyorum, ama şimdi genel çözüm için soruyorum, bu yüzden burada bootstrap 4 hakkında düşünün burada npm ile kullanılabilir başka bir css modülü olabilir).

Ben NPM yoluyla önyükleme yükleyin: npm install bootstrap@4.0.0-alpha.4 --save

Öncelikle ben vendor.browser.ts dosyaya import 'bootstrap/dist/css/bootstrap.css'; eklemek için yeterli olduğunu düşündü.

Fakat öyle değil.

Uygun bir çözüme sahip olmak için ne yapmalıyım? Ben sormuyorum

Çözümleri:

1. "varlıklar klasörüne harici css modülünü kopyalama ve oradan kullanmak" Ben birlikte çalışan bir çözüm arıyorum
   • npm paketi ile. Yukarıda açıklandığı gibi, ben genel bir çözüm arıyorum
   • "WebPack için önyükleme yükleyicisi kullanın" önyükleme burada sadece bir örnektir.
2. Ben yukarıda belirttiğimiz tam marş paketinde bir çözüm arıyorum
   • "Başka yığınını kullan".

Answer 1

Sen bazı değişiklikler yapmadan, satıcıları bu yığın kullanarak dosyasını herhangi css ithal etmek mümkün olmayacaktır.

Neden? gerçekte ne istediğini bir stil etiketinde satıcı css olduğunda sadece, dize olarak css ithal ediyor

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

: Eh bu hat için. Çünkü bu hat encapsulation: ViewEncapsulation.None, ait hiçbir kapsülleme var AppComponent yılında

@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'] 
}, 

Bu kural bileşenleri css dosyalarını içe sağlar, temelde bu: Eğer config/webpack.commons.js kontrol Eğer bu kuralı bulacaksınız Bu, uygulamanıza tüm dünyada css kurallarının uygulanacağı anlamına gelir.Yani uygulama bileşeninde önyükleme stilleri içe aktarabilirsiniz:

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

Ama sen vendor.ts içe direniyorlarsa o zaman yeni bir yükleyici yüklemek gerekir, npm i style-loader --save-dev bu webpack sayfanıza css enjekte sağlayacaktır. Sonra da webpack.common.js üzerinde, belirli bir kural oluşturmak ve değiştirmek için gereken varolan:

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

sadece node_modules ikinci içindeki herhangi paketten, css almaya çalıştığınızda uygulanacak firs kural kural, node_modules

Answer 2

dışında aldığınız herhangi bir css'ye uygulanacaktır. Bu, styles.css dosyasında @import '~bootstrap/dist/css/bootstrap.css'; kullanılarak mümkündür.

Answer 3

Yani burada ben en uygun bulmak angular-cli kullanarak çeşitli CSS dosyaları içe bir yoludur (~ unutmayın).

Temel olarak, yapılandırmada CSS dosyalarına (eğer bunları geçersiz kılacaksanız, sipariş önemlidir) ve geri kalanını angular-cli izleyebileceksiniz.

.angular-cli:

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

örnek bir tam yapılandırma şöyle olabilir: şöyle Örneğin, yapılabilir düğüm-modüllerden gelen stilleri bir çift eklemek isteyebilirsiniz .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": {} 
    } 
}