Как вы добавляете CSS-файлы приложения с помощью Angular CLI?

Question

Я хочу добавить стиль осколка в свое приложение Angular 2, такие как шрифты и цветовые схемы, которые будут использоваться везде. В прошлом я всегда делал это, добавив тег, как это мой индексной страницы:

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

Это не работает с любой консоли используется, чтобы служить приложение. Я попытался вручную добавить файлы css в папку dist после сборки, но это тоже не работает.

Я также попытался добавить CSS в папке anugular-cli-build.js как этот

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

Он по-прежнему кажется, не строить файлы в папку css, когда я говорю это, чтобы построить.

Эта таблица стилей предназначена для стилей базовой линии для всего приложения, а не для того, что я хочу включить в тег styleUrl.

Answer 1

Конфигурация vendorNpmFiles предназначена для того, чтобы сообщать cli build, которые node_modules копирует в каталог dist.

Мне удалось создать каталог «resources» в моей директории src, поместить туда весь файл css для приложения, и он был скопирован на сборку dist без дополнительной настройки.

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

Если вы пытаетесь включить такую ​​структуру, как загрузчик, то да, вы можете использовать конфигурацию vendorNpmFiles, чтобы скопировать его из ваших node_modules:

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

Тогда ваша ссылка в вашем index.html будет:

<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

Поскольку файлы, которые вы имеете в виду (т.е. [framework-x].css) статичны вы можете использовать тыс e public директория для копирования файлов непосредственно в папку dist без дополнительной настройки.

основано на вашем включении:

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

файл будет перемещен в DIST каталог так:

dist 
|-- framework-x.css 

Таким образом, вы можете ссылаться на него в index.html непосредственно.

Answer 3

В последнем нг кли просто добавляя необходимые стили и скрипты, как показано ниже в «.angular-cli.json» выставит его в пачке автоматически

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