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?
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 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
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.
I want to add css into component [Angular 4]. I try to add this into "resume.component.ts" by styleUrls, but I can't access url of assets !!!
Please help me add css this into component. Thanks all :D
you can add your css file's relative link in .angular-cli.json (or angular.json for v6) file
here:
"styles": [
// relative link
]
There are many ways of importing CSS file into Angular application.
Angular follows the component structure (angular cli) which will provide you CSS/HTML/TS/Spec.ts file per component.
So you can simply add CSS file for that particular component in #component's styleUrls property (which accept array of file names) by just adding file name , no need to add full path there.
If you want to add some global CSS in your application then you can add it into the .angular-cli.json file (as you are using angular v4).
Another way, if you want to import CSS files into another CSS then you can use simply import syntax like this using full path
#import '/assets/css/yourstyle.css';
You have to put your files and use the relative path from the assets folder.
For example in the above you've put a css file in src/assets/css/general_style.css, then
<link rel="stylesheet" href="assets/css/general_style.css">
You type wrong path. asset => assets
#import '/asset/css/main_style.css';
please change to
#import '/assets/css/main_style.css';