In angular.json file, if I add
"styles": [
"src/styles.css",
"src/utility/vendor/bootstrap/css/bootstrap.css",
"src/utility/vendor/font-awesome/css/fontawesome-all.min.css",
"src/utility/vendor/animate.css/animate.min.css",
"src/utility/vendor/slick-carousel/slick/slick.css",
"src/utility/css/front.css",
"src/utility/css/codepen.css"
],
these files are accessible only for index.html file, and not app.component.html or any component as well. Other components are not even being rendered with the same content of index.html, but index.html is working fine.
1: Configure angular.json:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.scss"
]
2: Import directly in src/style.css or src/style.scss:
#import '~bootstrap/dist/css/bootstrap.min.css';
Alternative: Local Bootstrap CSS
If you added the Bootstrap CSS file locally, just import it in angular.json
"styles": [
"styles/bootstrap-3.3.7-dist/css/bootstrap.min.css",
"styles.scss"
],
or src/style.css:
#import './styles/bootstrap-3.3.7-dist/css/bootstrap.min.css';
I personally prefer to import all my styles in src/style.css since it’s been declared in angular.json already.
Any CSS style file added to styles array at angular.json will be injected to index.html and will be a globally this mean any class added in these files you can use it inside any component.
another way is to add style file manually to index.html this work if the file host on cdn or in the assets folder.
Related
I have an application that was build using the Angular CLI, Angular version 11. I have some directives in my application that require specific css classes. Rather than have separate scss files for each directive I would like to add the scss classes to the styles.css contained in the application root. However I can't do this as the styles.css file is css and not scss. Is there a way I can convert this file to scss?
I just manually changed the file extension and changed the reference in the angular.json file in the { "architect": { "build : { "styles": } } }property - so far I have experienced no unexpected behavior or errors
How to include the custom scss files we download from Syncfusion Theme Studio into angular cli?
The site recommends adding the URL to the styles section in angular.json. Is there a way to avoid doing that and import it into styles.scss.
I have tried by adding:
#import './scss/themestudio/multiselect-bootstrap4-202104281445211345-8b09079-/bootstrap4.scss';
It doesn't work.
You could just copy/paste the new css or scss content directly into your existing styles.scss file
We have created sample for your reference that you can get from the following link.
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ej2-sync-343293087
We request you to just include the downloaded SCSS file from Theme Studio and copy the file into the application repo. Also, need to modify our “angular.json” as in following code snippet.
"styles": [
"src/styles.scss",
"src/style/material.scss"
],
Please get back to us if you have any queries.
I am working on an angular project, where I am having my all the CSS files under "styles" folder. Styles configuration in angular.json is as follows:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
]
In angular component, I am accessing styles as follows:
styleUrls: ['./../../../styles/style1.css']
CSS are getting applied when inside project. But I want to remove my CSS files form styles folder and place them at location external to project for example at "C:\Users\Style\". And want to access styles from this folder in my angular project. I tried to do that by giving C drive path in styleurls and changing path in styles in angular.json. But that is not working. Is there is any way I can do it?
I have ASP.NET MVC as server and Angular as client application.
I do not have static index.html but it is index.cshtml. The styles I use are global styles, not component scoped.
My question is how do I go about working with the scss styles file (bunch of) with angular/webpack and MVC?
Do I have to manually import "global style files" in the app.component file? Do I do the same for vendor css files like bootstrap?
What is the best practice? I'm thinking something as follows:
import { Component } from '#angular/core';
import '../styles/myglobalStyles.css'
import '../styles/boostrap.min.css'
import '../styles/otherVendors.min.css'
#Component({
selector: 'my-app',
templateUrl: './app.component.html'
})
export class AppComponent { }
Another question is in ANGULAR CLI set up, what is done is to add following in angular-cli.json file. What does it do? Does it add styles.css file to the app.component.html during build? (Can you point out to any source/documentations?)
],
"styles": [
"src/styles.css"
],
You should use webpack to bundle all scss file and transform all scss file to css then extract it to file call lib.css then include it in Layout.cshtml since it global style for your application. Maybe to improve you can use something third party lib to uglify your css code also to improve performance
Cheers
the styles referenced in the component style styleURL metadata, inline in the component template or imported into the component enable CSS encapsulation meaning that they are scoped to the individual component to prevent collisions.
#Component({
selector: 'comp',
templateUrl: './comp.component.html',
styleUrls: ['./comp.component.css']
})
style scope doc https://angular.io/guide/component-styles#style-scope
To create global style rules that will be applied to any element you can add additional style files, including vendor css to the agular.json which will be bundled by webpack (which is embedded in the cli) and linked to the index.html.
add it to the styles array in angular.json:
"styles": [
"styles.css",
"../styles/boostrap.min.css"
],
see the docs on workspace configuration for angular cli
https://angular.io/cli#workspace-and-project-configuration
I am practically new in Angular2 and inherited the project with Angular 2 frontend. After switching to the new Angular 4.0 on console I see the error:
"compatibility.ts:221 Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming"
The mdb.min.css is in the app/assets/css folder. The specification in package.json shows the following:
"#angular/common": "^4.0.0",
"#angular/compiler": "^4.0.0",
"#angular/core": "^4.0.0",
...
"angular-bootstrap-md": "*"
How to fix the error?
You have to import a theme into your global css or sass file:
#import "~#angular/material/prebuilt-themes/indigo-pink.css";
or alternatively include it in your index.html file:
<link href="node_modules/#angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
As in the theming documentation already mentioned Angular Material provides the following pre-built themes:
deeppurple-amber.css
indigo-pink.css
pink-bluegrey.css
purple-green.css
You have to include one of these themes or you create your own custom theme.
Adding #import to styles.css doesn't work for me, adding theme to angular.json did the trick
You can replace the default angular-material-theme with one of the above-mentioned angular-material-themes using the following ways.
You can directly include the pre-built angular-material-theme in the styles.css file.
#import '#angular/material/prebuilt-themes/deeppurple-amber.css';
Or Add the following inside the head tag of index.html file.
<link href="node_modules/#angular/material/prebuilt-themes/deeppurple-amber.css" rel="stylesheet">
Or Update the following in angular.json file.
"styles": [
{
"input": "node_modules/#angular/material/prebuilt-themes/deeppurple-amber.css"
},
"src/styles.css"
],
I had same issue when i upgraded from Angular version 7 to 8.Even after imported to .sass file / index.html / angular.json file.I tried upgrading angular material separately again , it solved the issue.
ng update #angular/material#latest
Please insert below code into your styles.css or styles.scss which is located in your src folder.
#import "../node_modules/#angular/material/prebuilt-themes/deeppurple-amber.css";
You can select any css under the prebuilt-themes folder.