angular-cli как добавить глобальные стили?

Я знаю, что уже слишком поздно, но ситуация продолжает меняться. По состоянию на 16 марта 2017 года

Это сработало для меня для cli.

<link rel="stylesheet" href="src/styles.css">

Хотя я думаю, что ответ @filoxo является документированным решением, что-то вроде следующего работает и для меня, и может сделать более ясным, какой компонент нуждается в нем:

require('style!../../../node_modules/bootstrap/scss/bootstrap-reboot.scss');

Или при использовании более поздних версий Angular CLI:

require('style-loader!../../../node_modules/bootstrap/scss/bootstrap-reboot.scss');

Или:

@Component({
    selector: 'my-component',
    styles: [require('style-loader!../../../node_modules/bootstrap/scss/bootstrap-reboot.scss')],
    styleUrls: ['./my.component.scss']
})

Последнее может быть не разрешено; возможно, не следует предоставлять и styles, и styleUrls, так как я получаю "литерал объекта не может иметь несколько свойств с одинаковым именем в строгом режиме" и " дублировать идентификатор 'стили'".

У меня была та же проблема и я нашел Этот пример еще до того, как в cli появилась поддержка sass/less. Я предполагаю, что текущая сборка cli (1.0.0-beta.5) может компилировать только компонент уровня sass, а может даже игнорировать .css в папке / src. Мне удалось поставить global *.css в папке public/ и скопировал его в /dist, но не смог получить такое же поведение от /src, и препроцессоры, похоже, не компилировались по умолчанию. Я полагаю, что это может быть по замыслу и ИМХО несколько парадоксальный. Angular cli, к счастью, построен поверх брокколи, и это может быть хорошо стоит времени и усилий, чтобы узнать, как настроить сборку с помощью брокколи, как в примере ниже:

Вот копия angular-cli-build.js, с которым я закончил.

'use strict';
/* global require, module */

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
var compileSass = require('broccoli-sass');
var mergeTrees = require('broccoli-merge-trees');
var _ = require('lodash');
var glob = require('glob');

module.exports = function(defaults) {

  let sourceDir = 'src';
  let app = new Angular2App(defaults, {
      sourceDir: sourceDir,
      sassCompiler: {
        includePaths: [
          'src/style'
        ]
      },
      vendorNpmFiles: [
        'systemjs/dist/system-polyfills.js',
        'systemjs/dist/system.src.js',
        'zone.js/dist/*.js',
        'es6-shim/es6-shim.js',
        'reflect-metadata/*.js',
        'rxjs/**/*.js',
        '@angular/**/*.js'
      ]
    });
    let styles = mergeTrees(_.map(glob.sync('src/**/*.scss'), function(sassFile) {
        sassFile = sassFile.replace('src/', '');
        return compileSass(['src'], sassFile, sassFile.replace(/.scss$/, '.css'));
    }));
    return mergeTrees([app, styles], { overwrite: true });
};

Просто переименуйте src / styles.css для src / стилей.scss

Не забудьте переименовать стили.css для стилей.СКСС в своем .угловой-кли.и джсон тоже.

Привет в angular 4 мы можем добавить наши глобальные стили в стили.css на который ссылается angular-cli.json

 "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [],

Мы можем импортировать все наши css в стили.css-файл

/* You can add global styles to this file, and also import other style files */
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
@import 'assets/css/test.css';

Существует также решение для добавления внешнего CSS, которое является, Поместите все ваши CSS в папку assets / css следующим образом:

assets/css/style1.css
assets/css/style2.css
assets/css/style3.css

После добавления всех внешних CSS, вы должны импортировать их ссылку в глобальном стиле.УСБ (я.е ГКЗ/стиль.css) вот так:

@import 'assets/css/style1.css';
@import 'assets/css/style2.css';
@import 'assets/css/style3.css';

Также не забудьте включить глобальный CSS в angular-cli.json вот так:

  "styles": [
    "styles.css",
  ],

Я использую следующую стратегию (хотя я не видел никаких официальных решений по этому вопросу от команды angular-cli, поэтому там может быть лучший метод):

Если все мои src файлы находятся в src / app/..., Я размещаю приложение.scss-файл в корне ./ каталог приложений. Затем он автоматически компилируется в css с текущей конфигурацией сборки, поэтому я могу включить его в свой индекс.html как таковой:

<link rel="stylesheet" type="text/css" href="app/app.css">

Если ваша файловая структура по какой-либо причине отличается от структура файла CLI по умолчанию, просто убедитесь, что приложение.scss-файл находится в том же каталоге, где находится ваш основной компонент приложения. Мне нравится этот метод, потому что он означает, что мне не нужно изменять сборку, что делает менее болезненным обновление проекта в будущем.

Добавьте scss в массив стилей angular-cli.формат JSON.