发表新帖
发表新帖

angular-cli how to add global styles?

前端 未结
关注
13 1520
南笙
南笙 2020-12-16 09:18

I created a global style sheet using sass and put it in the public/style/styles.scss. I only specify a background color.

In the index, I added a link to

相关标签:
13条回答
  • 刺人心
    2020-12-16 09:56

    There is also a solution to add external CSS, which is, Put all your CSS in assets/css folder like this:

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

    AFter adding all external CSS, you have to import their reference in global style.css (i.e src/style.css) like this:

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

    Also don't forget to include global CSS in angular-cli.json like this:

      "styles": [
    "styles.css",
  ],
    0 讨论(0)
  • 太阳男子
    2020-12-16 09:57

    None of the above answers explains what is REALLY going on in Angular's CSS system or why you might be seeing cascading problems. You might consider moving all your CSS out of the Angular compiler and into your own external links.

    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 an embedded style in the DOM of your browser in memory:

    <!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>
...

    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 as those styles have a higher cascade order than "linked" or external styles, which could cause a conflict. So any CSS in your linked styles could be hidden with these embedded style systems Angular uses.

    Whats worse 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, hide styles that are not supported in very old browsers, and manage large libraries of styles by function. 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 weights and orders.

    Angular's style system also doesn't support skinning of websites or themes using this inline system. 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.

    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" />

    You will have to change your angular.json settings file by removing the 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.

    This then gives you back complete control of your websites styling, cross-browser fixes, skins, 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 Component styling system as long as you understand that when you lazy load or preload angular modules those embedded style elements do get pushed into the DOM and could cascade over your inked styles. But I think that's the main purpose of Angular's modular styling system. But to be honest, its unnecessary if you use external sheets anyway and follow basic cascading rules.

    0 讨论(0)
  • 说谎
    2020-12-16 09:57

    hi in angular 4we can add our Global styles in styles.css which is referenced in angular-cli.json

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

    we can import all our css to styles.css file

    /* 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';
    0 讨论(0)
  • 暗喜
    2020-12-16 10:00

    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].styles property in angular-cli.json

    See also Global Styles in angular-cli's wiki.

    0 讨论(0)
  • 时光说笑
    2020-12-16 10:00

    just rename src/styles.css to src/styles.scss

    remember to rename styles.css to styles.scss in the .angular-cli.json too.

    0 讨论(0)
  • 悲哀的现实
    2020-12-16 10:01

    For elements outside of the scope of your application's <app-root> (e.x. <body>) you can use the solution other's provided.

    If the element is inside your application, you could also not make it global and instead define the styles in a string, then import it into the styles property on the Component class decorator where you want to use those styles.

    That way you will get encapsulation and re-use. It just comes with the downside of writing it in a string which may limit your editor's capacity to offer static analysis of your styles.

    AFAIK, the angular cli will not compile it twice.

    Example: 

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

    And if you want to have the styles in a proper file, you can apply the same logic to the styleUrls property.

    Example: 

    @Component({
    selector: 'app-overview',
    templateUrl: './overview.component.html',
    styleUrls: [
        './overview.component.scss', 
        '../common/table-styles.scss' // <- here
    ]
})
export class OverviewComponent { ... }
    0 讨论(0)
 看不清?
提交回复
热议问题