How do you add app wide CSS files using the Angular CLI?

Question

I want to add some shard styling to my Angular 2 app, things like fonts and color schemes that will be used every where. In the past I have always done this by adding a tag like this to my index page:

<link rel="stylesheet" href="css/framework.css" />

This doesn't work with whatever the CLI is using to serve the app. I tried manually adding the css files to the dist folder after building, but that doesn't seem to work either.

I also tried adding the css in the anugular-cli-build.js folder like this

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'css/*.css'
    ]
  });
};

It still doesn't seem to build the files in the css folder out when I tell it to build.

The style sheet in question is meant to be the base line styles for the entire app and not something I want to have to include in the styleUrl tag.

Senthil · Accepted Answer · 2017-04-29 16:56:20Z

14

In the latest ng cli just adding required styles and scripts like below in ".angular-cli.json" will expose it in bundle automatically

"apps":{
 "styles": [
        "../node_modules/ng2f-bootstrap/dist/bootstrap.min.css",
        "styles.css"
      ],
  "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js"
      ],
}

answered Apr 29, 2017 at 16:56

Senthil

1,60919 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

codepleb Over a year ago

This is the way to go!

Sateesh K Over a year ago

added the custom .css from node_modules package to the list of styles to be used in "styles" in my ".angular-cli.json" and when i build the app i see the styles.bundle.js being generated. How ever when i run the App the Styles are missing. Not sure what i am doing wrong. Do i need to add any references in the index.html page ? Thanks

Bytech Over a year ago

Anyone on the diff on adding it to angular.json instead (worked for me)? Using the CLI, but didn't find an angular-cli.json. That's in Angular 6.

awiseman · Accepted Answer · 2016-05-26 15:41:28Z

6

the vendorNpmFiles configuration is for telling the cli build which node_modules to copy into the dist directory.

I was able to just create a 'resources' directory in my src directory, put my app-wide css file in there, and it was copied over to the dist build without any further configuration.

src
|- app
|  |
|
|- css
|  |
|  |- framework.css
|
|- index.html

If you're trying to include a framework like bootstrap, then yeah, you can use the vendorNpmFiles configuration to copy it from your node_modules:

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'bootstrap/dist/**/*',
      ...
    ]
  }
}

Then your reference in your index.html would be:

<link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css"> <script src="vendor/bootstrap/dist/js/bootstrap.js"></script>

edited May 26, 2016 at 15:41

answered May 26, 2016 at 15:33

awiseman

5,7641 gold badge22 silver badges15 bronze badges

1 Comment

Bob Over a year ago

This is exactly what I needed. I was putting the css folder at the same level as the src folder instead of at the app level. Thanks!

Brocco · Accepted Answer · 2016-05-27 03:02:45Z

3

Since the files you're referring to (i.e. [framework-x].css) are static you can utilize the public directory to copy files directly to the dist folder without any additional configuration.

based upon your inclusion of:

src
|-- public
|   |-- framework-x.css

your file will be moved to the dist directory like this:

dist
|-- framework-x.css

So you can reference it in index.html directly.

answered May 27, 2016 at 3:02

Brocco

65.4k12 gold badges74 silver badges77 bronze badges

1 Comment

Leandro Bardelli Over a year ago

didn't work for VS2022. I've to create the folder "public" is not coming with the default template. In any case returns 404.

Collectives™ on Stack Overflow

How do you add app wide CSS files using the Angular CLI?

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related