Bob Bob - 6 months ago 225
CSS Question

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

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.

Answer

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>

Comments