Importing Style Sheets in Angular4

angular-cli how to add global styles?

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.

How to @import CSS file in Angular?

If you want to point to a css/scss file within a component, you can add a shortcut to your styles folder in your angular.json in the options node like so :

        "my-app": {
            "root": "...",
            "sourceRoot": "...src",
            "projectType": "application",
            "architect": {

                "build": {
                    [...]
                    "options": {
                        [...]
                        "stylePreprocessorOptions": {
                          "includePaths": [
                            "projects/my-app/src/styles" // path to your styles folder
                          ]
                        }
                    }
                    
                },

            }
        },

Then, whenever you use @import "...";, it will start from the css folder, so you can use @import "theme.scss";

Is it better to import styles in angular.json or importing in styles.scss?

If you add your CSS imports in the angular.json file, think of it as adding multiple global css files for your project.

But if you add your CSS imports in the styles.css file, you will have one global stylesheet for your angular project but you will refer multiple stylesheets in it.

I personally refer my stylesheets in the angular.json file as I find it easy to maintain the custom global CSS that I write as apposed to importing multiple global CSS stylesheets such as bootstrap

Angular 2/4 : How to load css file from Assets

I got same error once I have started Angular 4 project

What I have done is

In my assets there is no css

"assets": [
        "assets",
        "favicon.png"
      ],

And in style

"styles": [
        "../src/assets/css/main.css",
]

And then please do ng serve again

Hope this helps

Angular - including CSS file in index.html

Angular CLI have it's own way to initialize your global css/js.

They are located in .angular-cli.json configuration

Locate "styles": and add your css there

Example :

"styles": [
   "../node_modules/angular2-busy/build/style/busy.css",
   "styles.css"
],

Hope that helps.

---

Related Topics