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

Question

Я создал глобальную таблицу стилей, используя sass, и поместил ее в public/style/styles.scss. Я указываю только цвет фона.

В индексе, я добавил ссылку на него: <link rel="stylesheet" href="style/styles.css">

Цвет фона не работает на бирке тела. При проверке тега тела я вижу, что фоновый цвет был применен, но отменен scaffolding.less:31

Что я делаю неправильно?

Заранее спасибо

Answer 1

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

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

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

См. Также Global Styles в angular-cli 's wiki.

Answer 2

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

Вот копия углового-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 }); 
}; 

Answer 3

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

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

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

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

Answer 4

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

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

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

Answer 5

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

Answer 6

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

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

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

Answer 7

просто переименовать SRC/styles.css в SRC/styles.scss

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