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

Ответ 1

Начиная с версии бета-версии CLI (которая использует Angular 2.0 final), глобальная таблица стилей может быть связана внутри angular-cli.json под клавишей "styles". Это ссылка на файл относительно каталога src/, который по умолчанию равен style.css.

Используя этот метод, вы можете:

• Скопируйте глобальные стили в src/styles.css
• Используйте импорт CSS для импорта внешних правил в styles.css
• Добавьте более глобальные стили с помощью свойства apps[0].styles в angular-cli.json

См. также Глобальные стили в вики angular-cli.

Ответ 2

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

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

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

Ответ 3

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

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, поскольку я получаю "Литерал объекта не может иметь несколько свойств с тем же именем в строгом режиме" и "Стиль дублирующего идентификатора".

Ответ 4

У меня была та же проблема, и я нашел этот пример до того, как в cli была даже поддержка sass/less. Я полагаю, что текущая сборка cli (1.0.0-beta.5) может компилировать только sass компонента и даже игнорировать .css в папке /src. Мне удалось разместить глобальный *.css в общедоступной/папке и скопировать его в /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 });
};

Ответ 5

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

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

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

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

Ответ 6

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

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

После добавления всех внешних CSS, вы должны импортировать их ссылку в глобальный style.css (т.е. src/style.css) следующим образом:

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

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

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

Ответ 7

просто переименуйте src/styles.css в src/styles.scss

не забудьте переименовать styles.css в styles.scss в .angular-cli.json тоже.

Ответ 8

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

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

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

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

Ответ 9

Для элементов, выходящих за рамки вашего приложения <app-root> (ex <body>), вы можете использовать предоставленное решение.

Если элемент находится внутри вашего приложения, вы также не можете сделать его глобальным и вместо этого определить стили в строке, а затем импортировать его в свойство styles в декораторе класса Component, где вы хотите использовать эти стили.

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

AFAIK, угловой cli не скомпилирует его дважды.

Пример:

const tableStyles = '
    table { color: red; }
';
@Component({
    selector: 'app-overview',
    templateUrl: './overview.component.html',
    styleUrls: ['./overview.component.scss'],
    styles: [tableStyles] // <- here
})
export class OverviewComponent { ... }

И если вы хотите, чтобы стили были в правильном файле, вы можете применить ту же логику к свойству styleUrls.

Пример:

@Component({
    selector: 'app-overview',
    templateUrl: './overview.component.html',
    styleUrls: [
        './overview.component.scss', 
        '../common/table-styles.scss' // <- here
    ]
})
export class OverviewComponent { ... }

Ответ 10

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