How do you add app wide CSS files using the Angular CLI?
Solution 1
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>
Solution 2
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"
],
}
Solution 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.
Bob
Updated on July 26, 2022Comments
-
Bob over 1 year
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 thismodule.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.
-
Bob almost 8 yearsThis 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!
-
codepleb almost 7 yearsThis is the way to go!
-
Sateesh K over 6 yearsadded 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 5 yearsAnyone 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.