Jak dodać szerokie pliki CSS dla aplikacji przy użyciu interfejsu Angular CLI?

Question

Chcę dodać nieco stylu czarów do mojej aplikacji Angular 2, takich jak czcionki i schematy kolorów, które będą używane wszędzie. W przeszłości zawsze odbywa się to poprzez dodanie znaku podobnego do mojej stronie indeksu:

<link rel="stylesheet" href="css/framework.css" /> 

To nie działa niezależnie od CLI używa do obsługi aplikacji. Próbowałem ręcznie dodawać pliki css do folderu dist po zbudowaniu, ale to też nie działa.

Próbowałem też dodawanie css w folderze anugular-cli-build.js jak ten

module.exports = function(defaults) { 
    return new Angular2App(defaults, { 
    vendorNpmFiles: [ 
     'css/*.css' 
    ] 
    }); 
}; 

Nadal nie wydaje się zbudować pliki w folderze css kiedy mówię go zbudować.

Omawiany arkusz stylów ma być stylem linii bazowej dla całej aplikacji, a nie czymś, co chcę uwzględnić w znaczniku styleUrl.

Answer 1

Konfiguracja vendorNpmFiles służy do informowania cli kompilacji, którą node_modules kopiuje do katalogu dist.

Udało mi się po prostu utworzyć katalog "resources" w moim katalogu src, umieściłem tam mój plik css dla całej aplikacji i został on skopiowany do dystrybucji dist bez żadnej dalszej konfiguracji.

src 
|- app 
| | 
| 
|- css 
| | 
| |- framework.css 
| 
|- index.html 

Jeśli starasz się m.in. ramy jak bootstrap, to tak, można użyć konfiguracji vendorNpmFiles skopiować go ze swoimi node_modules:

module.exports = function(defaults) { 
    return new Angular2App(defaults, { 
    vendorNpmFiles: [ 
     'bootstrap/dist/**/*', 
     ... 
    ] 
    } 
} 

Wtedy twój odniesienie w index.html będzie:

<link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css"> <script src="vendor/bootstrap/dist/js/bootstrap.js"></script>

Answer 2

Ponieważ pliki masz na myśli (tj [framework-x].css) są statyczne można wykorzystać th e public katalog do kopiowania plików bezpośrednio do folderu dist bez dodatkowej konfiguracji.

oparciu swojej włączenia:

src 
|-- public 
| |-- framework-x.css 

pliku zostanie przeniesiony do katalogu dist tak:

dist 
|-- framework-x.css 

Więc można odwoływać w index.html bezpośrednio.

Answer 3

W najnowszym CLI ng tylko dodanie wymaganych style i skrypty jak poniżej w „.angular-cli.json” narazi go w wiązce automatycznie

"apps":{ 
"styles": [ 
     "../node_modules/ng2f-bootstrap/dist/bootstrap.min.css", 
     "styles.css" 
     ], 
    "scripts": [ 
     "../node_modules/jquery/dist/jquery.min.js", 
     "../node_modules/bootstrap/dist/js/bootstrap.js" 
     ], 
}