In my angular application only one component uses handsontable, so the css need not be application level.In the component I tried using syntax like this:
styleUrls: ['./../../../node_modules/handsontable-pro/dist/handsontable.full.min.css']
But it had no effect.Finally I had to copy handsontable.full.min.css in the same folder as that of my component refer the styleUrls like this:
styleUrls: ['./handsontable.full.min.css']
I do not like copying as that leads to same file being at 2 places.
[As per handsontable documentation][1] to declare css at application level you have to add this to style.css
[1]: https://handsontable.com/docs/7.4.2/frameworks-wrapper-for-angular-installation.html
#import '~handsontable/dist/handsontable.full.css';
I experimented putting this line in style.scss and style.css file in turn, that also had no effect.
My Angular is 7.1.1 & handsontable is :
"#handsontable-pro/angular": "3.0.0",
"#handsontable/angular": "^5.1.1",
How can I avoid making 2 copies of handsontable css?
Edit: As per angular.json
"styles": ["projects/survey-webapp/src/styles.css"]
As per suggestion of #spots I added handsontable css to it without success:
"styles": [
"projects/survey-webapp/src/styles.css",
"node_modules/handsontable-pro/dist/handsontable.full.min.css"
],
Have you tried adding the stylesheet in the styles array in angular.json? I have never used Handsontable, but this is how I typically reference 3rd party stylesheets, such as bootstrap or ag-grid.
You'll want something like this:
"styles": [
//other styles...
"node_modules/handsontable-pro/dist/handsontable.full.min.css",
],
Related
Is There any difference to import to an Angular project a CSS lib (eg bootstrap) considering the options below:
Angular.json (npm)
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.scss"
]
Angular.json (CSS file locally)
"styles": [
"assets/lib/bootstrap/dist/css/bootstrap.min.css",
"styles.scss"
]
styles.scss (CSS file locally)
#import "assets/lib/bootstrap/css/bootstrap.min.css";
I suggest the first solution, because:
All three will end up in main CSS bundle
But 2. and 3. will also have original bootstrap inside assets. Even though it's used in bundle, it won't be removed from assets - which are a part of a build as it is.
Also, if you update Bootstrap it's way easier doing so by NPM.
I created a web component using Angular Elements (6.0.3). When I use the web component in another website, the webcomponent overwrites the styles of the parent page since it also uses Bootstrap. I know that there is the view encapsulation principle, but as far as I know the "Native" encapsulation is not yet fully supported. So for now I am using the default "Emulated".
I found out that if I add :host ::ng-deep in front of my styles, they are only applied to the web component itself which is great. However, all css and scss files that I load in angular.json seem to be overwriting the parent page too. Is there any way I can prevent this behaviour from imported style-files?
My style-imports in angular.json:
"styles": [
"node_modules/intl-tel-input/build/css/intlTelInput.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/angular-calendar/css/angular-calendar.css",
"src/styles.scss",
"node_modules/font-awesome/css/font-awesome.min.css",
"src/assets/css/wizard.css",
"src/assets/css/calendar.css",
"src/assets/css/ng2-select.css"
]
The 'styles' imports in the angular.json are for styles you wish to define globally to the whole app. To use ViewEncapsulation you'll need to link their stylesheets inside of their components like so:
#Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css'],
})
I am integrating Hypertrack in my angular 5 app as per
https://github.com/hypertrack/angular-dashboard-demo
As hypertrack css is external i have to include it in style URL or angular-cli.json style
.angular-cli.json
"styles": [
"../node_modules/ht-angular/src/styles/bulma.scss",
"../node_modules/ht-angular/src/styles/global.scss",
"../node_modules/ht-angular/src/styles/placeholder.scss",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/font-awesome/css/font-awesome.css",
"styles.css"
],
I have left styles.css i case of any overrrides.
If i include these css here my project css gets affected.
dashboard.component.ts
styleUrls: [
'../../../../node_modules/ht-angular/src/styles/bulma.scss',
'../../../../node_modules/ht-angular/src/styles/global.scss',
'../../../../node_modules/ht-angular/src/styles/placeholder.scss',
'./dashboard.component.css',
]
})
If i include css here there is no change.
How can i import external css without changes in my project?
Edit 1:
I have created a git repo other than my project.
https://github.com/rgnrw/hypertrack_css_issue.git
Now i am unable to add bootstrap into this
Am trying upgrade my project from angular JS to angular 4. I have style sheets which i have used in angular JS project.
This is my folder structure
I created components using angular CLI.
Everything works perfect but i don't know how to use my styles in angular 4 project.
Can some one explain how i can use my styles globally? and also only in certain components?
You can add your styles within the angular-cli.json:
"styles": [
// Your styles go here
]
This is for global styles. Local styles (for a certain component) are within the accordant CSS-file, which belongs to your component, e.g. foo.component.css. By default each component has the following annotation:
#Component({
selector: 'app-foo',
templateUrl: './foo.component.html',
styleUrls: ['./foo.component.css'],
})
So, foo.component.css contains the CSS for the component FooComponent.
Take a look here:
Component Styles
Global styles
Apart from adding the css file to angular-cli.json as shown by #pzaenger you can also add it to index.html page of your app as shown below :-
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
OR
you can even import it into an existing CSS file in your app by adding the #import statement at the top of that file as shown below :-
#import "~bootstrap/dist/css/bootstrap.min.css";
This way you can also add CDN links of the CSS file which cannot be done in angular-cli.json file. You can find a more elaborated explanation at this link.
I have an angular2 application build with angular-cli containing several components. Each component has a referenced stylsheed (scss).
Unique styles from those stylesheets are correctly applied to the component-template.
What I cannot do is overwrite styles from external css's which are included in the angular-cli from those component-stylesheets.
As soon as I move the style to the central styles.scss it works.
My angular-cli.json looks like this:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"../node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker.css",
"../node_modules/bootstrap-timepicker/css/bootstrap-timepicker.css",
"styles.scss"
],
Any Ideas how I can overwrite the bootstrap-css in the component.scss?
I've also posted this question as a possible bug to the angular-cli project and got the hint I needed:
Emulated view encapsulation (the default) emulates the behavior of Shadow DOM by preprocessing (and renaming) the CSS code to effectively scope the CSS to the component's view. If those classes got renamed for this behaviour, it cannot work and I cannot override styles from ie. bootstrap.
If I now set the encapsulation in the component to none, it works and I can override the styles in the component.scss.
#Component({
selector: 'app-generic-view',
templateUrl: './generic-view.component.html',
styleUrls: ['./generic-view.component.scss'],
encapsulation: ViewEncapsulation.None
})