As of the beta.14 release of the CLI (which uses Angular 2.0 final), a global stylesheet can be linked inside angular-cli.json under the "styles" key. This is a reference to a file relative to the src/ directory, which is style.css by default.
Leveraging this method you could:
- Copy the global styles into
src/styles.css - Use CSS imports to import external rules into
styles.css - Add more global styles via the
apps[0].stylesproperty inangular-cli.json
See also Global Styles in angular-cli's wiki.
As of the beta.14 release of the CLI (which uses Angular 2.0 final), a global stylesheet can be linked inside angular-cli.json under the "styles" key. This is a reference to a file relative to the src/ directory, which is style.css by default.
Leveraging this method you could:
- Copy the global styles into
src/styles.css - Use CSS imports to import external rules into
styles.css - Add more global styles via the
apps[0].stylesproperty inangular-cli.json
See also Global Styles in angular-cli's wiki.
Sounds like a CSS selectivity conflict between your linked CSS file and the compiled CSS in JavaScript that Angular places as Embedded CSS in the head or your web page, but which is stored in the memory of the browser.
This is why I always recommend you stop using Angular's poorly designed embedded CSS system and use linked CSS only. To do that you need to change your Angular JSON Setting file to remove the Embedded Style sheet, then Add a Setting to Tell Angular to copy your Linked CSS to the "dist" folder so your HTML link can access it. But see below for details...it helps to understand how CSS works in Angular. It is NOT intuitive!
HOW CSS WORKS IN GOOGLE ANGULAR
For starters, none of the above answers explains what is REALLY going on in Angular's CSS system or why you might be seeing cascading problems. In an Angular project, when you add styles paths directly into the "angular.json"(newer) or "angular-cli.json"(older) settings file, Angular grabs all those CSS files, compiles them into a JavaScript file, then spits them out as embedded styles in the head of your HTML file:
This angular.json setting:
"styles": [
"src/styles.css",
],
Gets turned into HTML and added to a gigantic embedded <style> tag that JavaScript creates in the DOM of your browser:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Project</title>
<style>
.mystyle {background:blue;}/* everything in styles.css gets dumped in here! */
</style>
<body>
...
Bad CSS design! You can only see this if you go to a browser and use F12 and look at the actual DOM and CSS angular spits out in memory in your browser. If you use component styling, the same thing happens when those components get loaded into the DOM by Angular modules, etc. They get dumped into ANOTHER embedded style element under the first one.
I'm not 100% sure the Angular guys understood what they were doing adding embedded styles like this. Any CSS in your linked styles could be hidden with these embedded style systems Angular uses if they are inserted AFTER your linked styles.
One of the things I don't like about Angular is if you place CSS IMPORT tags inside your "styles.css" file (for example to bootstrap), the compiler also grabs those and spits those out into these embedded style tags, as well. Traditionally, importing one style sheet into another was used to control cascade order as imported sheets were inserted before other styles in the parents page. We use @import to hide styles that are not supported in very old browsers, and manage large libraries of styles by function this way. Because Angular ignores all that now and jumbles all this CSS together, you're left with a gigantic embedded inline style block in the head of your "index.html" file, and its very difficult to control cascading orders this way.
Angular's style system also doesn't support skinning of websites or themes using this inline system, nor global caching of linked styles between pages which would save bandwidth. And it doesn't matter WHERE you put your style sheets in your folder structure, as people above mention. If they are referenced in the angular.json, they all get compiled into these embedded style blobs at the head of your page in an order you cannot control.
For that reason, I recommend you REMOVE ALL STYLE REFERENCES FROM "ANGULAR.JSON"! Then add them back into your "index.html" manually as links like this:
<link href="styles/styles.css" rel="stylesheet" />
...then changing your angular.json settings file by removing the styles entry in your styles array path list then pasting it back into your assets array list so Angular knows where to migrate your CSS folders and files in the dist folder, like so:
"assets": [
"src/styles",
],
"styles": [
],
When you now compile your Angular application, JavaScript ignores your CSS file (in terms of compiling it with the JavaScript and later building it into a <style> CSS block) and instead pushes that file as a plain vanilla resource CSS file into your "dist" folder of files. When you push that to production, your <link> CSS tag can now send that CSS file to the user's browser, which is normally how most websites deliver CSS in websites today.
Your Angular application is now using just <link> or external CSS files for styles in your index.html file rather than <styles> or embedded CSS. You can still use this internal or "embedded" Angular-managed CSS system. I am not 100% against it. In rare cases, embedded CSS was great for supporting offline web pages. Angular has a nice system for controlling and manipulating CSS this way. But it is just not traditionally how CSS was used in most caching systems the past 20 years. Using "external" or <link> CSS, your main styles are now stored in the user's "native" browser cache for much longer periods of time, saving bandwidth and rendering/paint speed in the browser.
<link> CSS gives you back complete control of your websites styling, cross-browser fixes, skins, etc. Your front-end designers also have control over it and updates are independent of kooky polyfills, preprocessing, scripting dependencies, etc. You also now gain back full control of your cascade order, which is critical if you want full control over that.
Linking external styles also has huge caching advantages over Google Angular's broken CSS system, as the browser's naturally cache all this on page refreshes or revisits. We've been using CSS this way since the 1990's so Im baffled why Google went back to an old inline style system. Linked styles are just superior for managing and caching css. We also add versioning query strings to the end of linked CSS files (/mystyles.css?v=1.2) so you can force refreshes, etc. Again to do this, REMOVE all references to CSS in the angular.json file and manually add them in as links in the head of your index.html file.
I do think you can safely use the Angular's modular or component-based styling system as long as you understand that when you lazy load or preload Angular modules those embedded style elements do get pushed down from the server to the user on every new visit or refresh of the script block. Also understand that way modern browsers work today is not how older ones worked.....new browsers do not parse embedded styles after linked ones, but honor the order you inserted them into the head of your HTML page. In other words today, the order you put them in the page could be unpredictable in Angular when it finally delivers the HTML. Cascade order is today now heavily controlled by the HTML designer, not the W3C recommendations.
I think that's the main purpose of Angular's modular styling system....to take over control of CSS away from the designer and hope they don't notice. But to be honest, its unnecessary if you use external sheets and follow basic cascading rules.
Global style not loaded in Angular
css - Angular does not apply global defined styles - Stack Overflow
Angular global css file css are not applying to other components
Angular - Global styles.css file not applying w/o import
The last couple of projects I've done my styles.css information isn't affecting components automatically. I have to import the styles.css file on an individual basis.
Was there some sort of change in angular? I couldn't find anything online about it. Do I have to somehow manually update something somewhere to make them apply?
EDIT: The console log says that I have a violation of Chrome's inline event handler policy and it cites the styles line. Here is the line of code that angular is building when I run ng build:
</style><link rel="stylesheet" href="styles-FCZJTVHS.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles-FCZJTVHS.css"></noscript><link rel="modulepreload" href="chunk-VAXZXOKE.js">
As you can't load a global scss file into angular.json for a library (Angular CLI says nonono), I took following approach for my library:
-
In my src folder, I still added a styles folder, containing my global scss (imports, variables etc)
-
I declared all my variables on :host instead of :root (I want to use root, but they aren't being parsed that way)
-
In my components typescript files, I add a new line in the Component decorator.styleUrls array: the link to my global styles
This is working. When I import my components from my library into my main application, I see the stylings applied. But for some reason, all global styles get embedded into each and every component. This not only bloats my dist files, it could also potentially slow down my browser, since it now has to evaluate all css on a component-level.
Please note that I do not want to load the SCSS in my main application. It will tightly-couple the library to the application, making it less suitable for distribution.
Would it be a better idea to have a different styles library and load this in parallel with my component library?
Is this the correct approach? Can you suggest me a better way of doing this?
Thanks so much!
Just write your global styles in your src/styles.css file. That file will be added to styles.bundle.js when you run ng build.
If you'd like to add more style files, you can do so in your .angular-cli.json (or angular.json for Angular 6+) file. In that file you'll see an array called styles, with a single item by default which is styles.css (or src/styles.css in Angular 6). You can even include .scss files.
Using SCSS
If you want to use SCSS, simply change the extension of your src/styles.css file to .scss, then reflect the change in your .angular-cli.json (or angular.json in 6+) file as well, by editing the entry in the styles array.
Make Angular use SCSS by default
When creating components, you'd like Angular to create .scss styles files instead of .css. Here's how:
Angular 7
Starting from Angular 7, when you create an app with ng new appname, you will be prompted which stylesheet format you'd like to use, so you just choose SCSS (source). It seems like here ends the need to manually configure Angular to use SCSS.
Angular 6
Add this at the end of your angular.json file (source):
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
}
Angular 4 and lower
Locate this by the end of your .angular-cli.json file, and change the value of styleExt to scss:
"defaults": {
"styleExt": "css",
"component": {}
}
You can simply import the css in the main html file.
If you want to set the style in your component, you just need to use ng-deep before the rule you want to apply.
https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
It is indeed deprecated, but there is no replacement so far so you may as well use it for now
dashboard.component.scss
::ng-deep .report-dropdown {
.ui-dropdown-label {
background-color: $secondary;
color: white;
}
.ui-dropdown-trigger {
color: white;
background-color: $secondary;
border: none;
}
}
I don't know primeng, but I forked an old stackblitz showing color change (dropdown does not open on example though)
https://stackblitz.com/edit/primeng-bootstrap-ylpzwd?file=app/app.component.scss
Other solution
The other solution is to set the style in your global style sheet. This will work provided that your CSS rules are more specific that the ones applied by default by ngPrime
By default, Angular component styles are scoped to affect the component's view. This means that the styles you write will affect all the elements in your component template. They will not affect elements that are children of other components within your template. You can read more about view encapsulation in the Angular documentation.
If your component has view encapsulation turned on (default), your component styles will only affect the top level children in your template. HTML elements belonging to child components cannot be targeted by your component styles unless you do one of the following:
- (As you have already mentioned) Add the overriding style to your global stylesheet. Scope the selectors so that it only affects the specific elements you need it to.
- Turn view encapsulation off on your component. If you do this, be sure to scope your styles appropriately, or else you may end up incidentally targeting other components elsewhere in your application.
- (Not suggested) Use a deprecated shadow-piercing descendant combinator to force styles to apply to all the child elements. Read more about this deprecated solution in the Angular documentation.
to use global styles and disable view css encapsulation in involved components, add :
@Component({
..
encapsulation: ViewEncapsulation.None,
..
}
Well its working when i tried it
input {
outline: none;
float: right;
}
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none;
}
input[type=search] {
background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
border: solid 1px #ccc;
padding: 9px 10px 9px 32px;
width: 55px;
height:15px;
-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
input[type=search]:focus {
width: 130px;
background-color: #fff;
border-color: #66CC75;
-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
box-shadow: 0 0 5px rgba(109,207,246,.5);
}
input:-moz-placeholder {
color: #999;
}
input::-webkit-input-placeholder {
color: #999;
}
input {
outline: none;
float: right;
}
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none;
}
input[type=search] {
background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
border: solid 1px #ccc;
padding: 9px 10px 9px 32px;
width: 55px;
height:15px;
-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
input[type=search]:focus {
width: 130px;
background-color: #fff;
border-color: #66CC75;
-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
box-shadow: 0 0 5px rgba(109,207,246,.5);
}
input:-moz-placeholder {
color: #999;
}
input::-webkit-input-placeholder {
color: #999;
}<div class="col l3 offset-l9">
<input type="search" placeholder="Search" #input>
</div>[https://jsfiddle.net/xr9fvLgd/]