angular-cli как добавить глобальные стили?
Я создал глобальную таблицу стилей, используя sass, и поместил ее в public/style/styles.scss, Я только указываю цвет фона.
В индексе я добавил ссылку на него: <link rel="stylesheet" href="style/styles.css">
Цвет фона не работает на теге body. После проверки тега body я вижу, что цвет фона был применен, но был отменен scaffolding.less:31
Что я делаю не так?
заранее спасибо
14 ответов
Начиная с бета-версии CLI (в которой используется финальная версия Angular 2.0), глобальная таблица стилей может быть связана внутри angular-cli.json под ключом "стилей". Это ссылка на файл относительно src/ каталог, который является style.css по умолчанию.
Используя этот метод, вы могли бы:
- Скопируйте глобальные стили в
src/styles.css - Используйте импорт CSS для импорта внешних правил в
styles.css - Добавьте больше глобальных стилей через
apps[0].stylesнедвижимость вangular-cli.json
Смотрите также Глобальные стили в angular-cliвики
Ни один из приведенных выше ответов не объясняет, что ДЕЙСТВИТЕЛЬНО происходит в системе CSS Angular или почему вы можете видеть каскадные проблемы. Вы можете подумать о переносе всего вашего CSS из компилятора Angular в свои собственные внешние ссылки.
В проекте Angular, когда вы добавляете пути к стилям непосредственно в файл настроек angular.json(новее) или angular-cli.json(старый), Angular захватывает все эти файлы CSS, компилирует их в файл JavaScript, а затем выводит их как ВСТРОЕННЫЕ СТИЛИ в заголовок вашего HTML-файла:
Этот параметр angular.json:
"styles": [
"src/styles.css",
],
Gets превратился во встроенный стиль в DOM вашего браузера в памяти:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Project</title>
<style>
.mystyle {color:blue;}/* everything in styles.css gets dumped in here! */
</style>
<body>
...
Плохой дизайн CSS! Вы можете увидеть это, только если зайдете в браузер и нажмете F12 и посмотрите на фактические DOM и CSS angular, которые появляются в памяти вашего браузера. Если вы используете стили компонентов, то же самое происходит, когда эти компоненты загружаются в DOM модулями Angular и т. Д. Они выгружаются в ДРУГОЙ встроенный элемент стиля под первым.
Я не уверен на 100%, что ребята из Angular понимали, что они делали, добавляя такие встроенные стили, поскольку эти стили имеют более высокий каскадный порядок, чем "связанные" или внешние стили, что может вызвать конфликт. Таким образом, любой CSS в ваших связанных стилях может быть скрыт с помощью этих встроенных систем стилей, которые использует Angular.
Что еще хуже, если вы поместите теги CSS IMPORT в свой файл "styles.css" (например, для начальной загрузки), компилятор также захватит их и поместит во встроенные теги стилей. Традиционно импорт одной таблицы стилей в другую использовался для управления каскадным порядком, скрытия стилей, которые не поддерживаются в очень старых браузерах, и управления большими библиотеками стилей по функциям. Поскольку Angular игнорирует все это сейчас и смешивает весь этот CSS вместе, у вас остается гигантский встроенный встроенный блок стилей в заголовке вашего файла index.html, и очень сложно контролировать каскадные веса и порядки.
Система стилей Angular также не поддерживает создание скинов для веб-сайтов или тем с использованием этой встроенной системы. И неважно, ГДЕ вы помещаете свои таблицы стилей в структуру папок, как упоминалось выше. Если на них есть ссылка в angular.json, все они компилируются в эти встроенные большие двоичные объекты стиля в начале вашей страницы.
По этой причине я рекомендую вам УДАЛИТЬ ВСЕ ССЫЛКИ СТИЛЯ ИЗ "ANGULAR.JSON"! Затем добавьте их обратно в свой "index.html" вручную в виде таких ссылок:
<link href="styles/styles.css" rel="stylesheet" />
Вам нужно будет изменить файл настроек angular.json, удалив список путей к массиву стилей, а затем вставив его обратно в список массивов ресурсов, чтобы Angular знал, куда перенести ваши папки и файлы CSS в папку dist.
Это затем дает вам полный контроль над стилем ваших веб-сайтов, кроссбраузерными исправлениями, скинами и т. Д. Теперь вы также получаете полный контроль над своим каскадным порядком, что очень важно, если вы хотите полный контроль над этим.
Связывание внешних стилей также имеет огромные преимущества по сравнению с неработающей системой CSS Google Angular, поскольку браузер, естественно, кеширует все это при обновлении или повторном посещении страницы. Мы используем CSS таким образом с 1990-х годов, поэтому я не понимаю, почему Google вернулся к старой системе встроенных стилей. Связанные стили просто превосходны для управления и кеширования css. Мы также добавляем строки запроса управления версиями в конец связанных файлов CSS (/mystyles.css?v=1.2), чтобы вы могли принудительно обновлять и т. Д. Снова, чтобы сделать это, УДАЛИТЕ все ссылки на CSS в файле angular.json и вручную добавьте их в виде ссылок в заголовке вашего файла index.html.
Я действительно думаю, что вы можете безопасно использовать систему стилей компонентов, если вы понимаете, что при ленивой загрузке или предварительной загрузке модулей angular эти встроенные элементы стиля действительно помещаются в DOM и могут каскадно накладываться на стили, написанные вами. Но я думаю, что это основная цель модульной системы стилей Angular. Но, честно говоря, в этом нет необходимости, если вы все равно используете внешние листы и следуете основным правилам каскадирования.
Сентябрь 2019:
Большинство других сообщений старые.
Файл: \ angular.json
Ключ: проекты> myProjectNameHere > архитектор> сборка> стили
"styles": [
"src/styles.css",
"node_modules/font-awesome/css/font-awesome.css",
{
"input": "./node_modules/bootstrap/dist/css/bootstrap.css"
}
],
Файл:src / styles.css
/* You can add global styles to this file, and also import other style files */
/* That is, have put css that is common for all pages in this file. */
body {
font-family: "Ubuntu", sans-serif;
}
С двумя вышеупомянутыми вещами CSS отлично применяется ко всем страницам.
Итак, ничего нового не нужно делать, если у вас Angular 8 или выше.
Если у вас есть проблема, вам нужно только очистить кеш (или нажмите Ctrl + Shift + R)
Существует также решение для добавления внешнего 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",
],
Я знаю, что уже слишком поздно, но все меняется. По состоянию на 16 марта 2017 г.
это сработало для меня в кли.
<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, поскольку я получаю "Литерал объекта не может иметь несколько свойств с одним и тем же именем в строгом режиме" и "Дублирующий идентификатор" стили "".
Привет в 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 '~@angular/material/prebuilt-themes/indigo-pink.css';
@import 'assets/css/test.css';
У меня была та же проблема, и я нашел этот пример еще до того, как в клиенте была даже поддержка sass/less. Я полагаю, что текущая сборка cli (1.0.0-beta.5) может компилировать только sass уровня компонента и может даже игнорировать.css в папке /src. Мне удалось поместить глобальный *.css в папку public/ и скопировать его в /dist, но я не смог получить то же поведение из /src, и препроцессоры не компилировались по умолчанию. Полагаю, что это может быть по замыслу и ИМХО несколько нелогичным. К счастью, Angular Cli построен поверх Broccoli, и, возможно, стоит потратить время и усилия, чтобы научиться настраивать сборку с использованием Broccoli, как показано в следующем примере:
Вот копия 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/styles.scss
не забудьте переименовать styles.css в styles.scss в.angular-cli.json тоже.
В зависимости от варианта использования может быть хорошей идеей использовать «ViewEncapsulation». Это также может удалить теневой дом из ваших HTML-элементов.
@Component({
selector: '...',
templateUrl: '...',
styleUrls: ['...'],
encapsulation: ViewEncapsulation.None
})
Не забудьте импортировать {ViewEncapsulation} из @angular/core. Для получения дополнительной информации см.: https://angular.io/guide/view-encapsulation .
Я использую Angular v8.1.2 с SCSS в качестве формата стиля и обнаружил, что глобальный syles.scss не работает.
В angular.json это:
"styles": [
"src/styles.scss",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
После поиска в Google я нашел причину по https://github.com/angular/angular-cli/issues/10855:
Эта проблема воспроизводится только в том случае, если в настройке angular.json в файле projects.architect.build.options.styles имеется более одного непустого файла.
Мое решение: удалите запись "node_modules / bootstrap / dist / css / bootstrap.min.css" из массива styles, оставив "src / styles.scss" в качестве единственного файла в [ ], а затем откройте styles.scss и добавив следующую строку вверху содержимого:
@import "node_modules/bootstrap/dist/css/bootstrap.min";
Для элементов, выходящих за рамки вашего приложения <app-root> (например, <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 { ... }
Я использовал следующую стратегию (хотя я не видел каких-либо официальных решений по этому вопросу от команды angular-cli, так что, возможно, есть лучший метод):
Если все мои файлы src находятся в src/app/..., я помещаю файл app.scss в корневой каталог./app. Затем он автоматически компилируется в css с текущей конфигурацией сборки, поэтому я могу включить его в свой index.html как таковой:
<link rel="stylesheet" type="text/css" href="app/app.css">
Если ваша файловая структура по какой-либо причине отличается от файловой структуры CLI по умолчанию, просто убедитесь, что файл app.scss находится в том же каталоге, где находится основной компонент приложения. Мне нравится эта техника, потому что это означает, что мне не нужно изменять сборку, что делает менее трудным обновление проекта в будущем.