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.
Related
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",
],
I'm using Angular+2 with bootstrap 4.3.X and I want to re-style/re-theme the bootstrap scss.
I want to achieve this the best way with Angular.
I'm aware this may be done with scss only.
[scss only]
angular.json
"styles": [
"src/styles.scss"
],
styles.scss
$theme-colors: ( "primary": #f700ff );
#import '../node_modules/bootstrap/scss/bootstrap.scss';
...
But what i'm trying to achieve is below.
[Angular way]
angular.json
"styles": [
"src/styles.scss",
"node_modules/bootstrap/scss/bootstrap.scss"
],
styles.scss
$theme-colors: ( "primary": #f700ff );
...
But it does not seem to matter which order i enter in angular.json. The $theme-colors simply won't work.
The two options work very differently. [scss only] is slow, the whole bootstrap module needs to be re-compiled if any component is changed. While in [Angular way] it never re-compiles during debug, only during build process.
Also
[scss only] ng build --prod -> dist= 2,99MB
[Angular way] ng build --prod -> dist = 2,11MB
Please help providing what is missing to do it the [Angular way].
Thank you in advance!
You need to make a variables.scss file in which you declare theme-colors, add that to your
"stylePreprocessorOptions": {
"includePaths": [""]
},
in angular.json configurations
Then in styles.scss at the top declare #import 'variables.scss' then you can use the $theme-colors var in your stylesheets. in every stylesheet you need the variables you need to declare the import statement.
I want to include an external style from a module in node_modules. Which is considered better practice?
Add the stylesheet to Angular.json in the application's build: styles: [], e.g.
"build": {
"styles": [
...,
"node_modules/leaflet/dist/leaflet.css"
}
}
Import the stylesheet into the application's styles.scss file, e.g.
#import "~leaflet/dist/leaflet.css";
If I were using styles.css instead of styles.scss, the second wouldn't work. However, given that I'm using SASS, I'm wondering if the second is preferred because it keeps Angular.json cleaner.
Are the two functionally equivalent or is there an important distinction that makes one better than the other?
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
Whats the advantage of importing bootstrap.scss to styles.scss file over adding .angular.cli.json styles block.
which approach is good and why?
styles.scss
#import '~bootstrap/scss/bootstrap.scss';
vs
.angular-cli.json
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
I want to understand is there any benefits in build size ..etc. the styles required for page will load..so the bundle size will reduce etc..
If you're willing to custom Bootstrap (default padding, margin, colors, etc) then you could do it thanks to scss.
You could just override some values and you should be good to go.
If you import the css within angular-cli.json, you won't be able to do that (in a clean/proper) way. (but it's fine, maybe you don't need to!)
Now, if you don't want to customize Bootstrap, you should just put it in angular-cli.json with the css otherwise you'll be compiling all Bootstrap source code over and over which might be a waste of time if you don't need customization.
Styles files should be for user custom styles. Lib styles better to import in angular-cli.json
It makes code more maintainable and easier to understand