I just upgraded to Angular 15 with Bootstrap 5 and none of my utility classes are working (ex: mb-3, mt-5, etc...) when including bootstrap in my styles.scss like this.
#import 'bootstrap/scss/bootstrap.scss';
I know the classes have some breaking changes from 4-5 and I've updated them accordingly in my application.
I noticed when I include bootstrap in my angular.json file the utilities classes work fine.
"stylePreprocessorOptions": {
"includePaths": [
"node_modules/bootstrap/scss/bootstrap.scss",
"src/styles"
]
},
But when I remove bootstrap from my angular.json file and only include it in my styles.scss file, like below, the utilities are missing from the build?
/* variable over rides */
#import "variables";
/* import bootstrap */
#import 'bootstrap/scss/bootstrap.scss';
/* custom css below */
To get the best of both worlds, I've included bootstrap for utilities in my angular.json file. Then also included bootstrap in my styles.scss file to over-ride the .scss variables, as needed. Ideally, I'd like to have utilities included in my #import of bootstrap in my styles.scss file and remove the angular.json include.
Any help with this would be great, I hate that I'm including bootstrap 2 times and I don't know what I'm missing.
Related
I'm starting to work on a large application styling files. As Bootstrap 4 offers SASS files, I decided to follow that path.
I have built the following files structure:
theme.scss: general definitios for the theme like colors and fonts. Today there is just one but there could be more in the future.
global.scss: includes Bootstrap, some Bootstrap overrides and application componentes -i.e. a field with its label as part of the top border.
site.scss: general application styles.
additional page-specific SCSS files. I.e.: login.scss.
The problem I'm having is that global.scss -the one that imports Bootstrap- is then imported by site.scss as well as other files like page-specific SCSS files. So, Bootstrap styles end up in more than one compiled CSS. Compiled CSS files are what the application actually references.
I've previously used LESS and I could solve this using #import (reference) "bootstrap" instead of just plain #import "bootstrap". With SASS I haven't been able to find any solution to this problem without modifying Bootstrap core files.
Is there any other recommended way to organize the files and avoid this problem? Am I missing something or doing anything wrong?
Here are the files contents (they are large files but I'm posting only enough contents to show the problem I'm having):
theme.scss
$my-primary-color: #04459a;
global.scss
#import "../theme.scss";
$primary: $my-primary-color;
#import "../../third-party/bootstrap/scss/bootstrap.scss";
%field{
// [...]
}
site.scss
#import "global.scss";
div.field {
#extend %field;
}
// [...]
login.scss (or many other)
#import "global.scss";
// [...]
In the application I'm referencing site.css and login.css (in the loign page, of course) and both of them include Bootstrap styles.
I've built something that works for me, not sure if it's the best solution or which drawbacks it has, though.
I took some ideas from this article: My favored SCSS setup with Bootstrap 4. Here's what I've built:
First I created two SASS files for importing Bootstrap (similar to what the article does with bootstrap/_config.scss but splitted):
bootstrap/_sass-componentes.scss
#import "../../terceros/bootstrap/scss/_functions.scss";
#import "../../terceros/bootstrap/scss/_variables";
#import "../../terceros/bootstrap/scss/_mixins";
bootstrap/_config.scss
#import "_sass-componentes.scss";
// Every other bootstrap file I want to include:
#import "../../terceros/bootstrap/scss/_root";
#import "../../terceros/bootstrap/scss/_reboot";
#import "../../terceros/bootstrap/scss/_type";
// [...]
#import "../../terceros/bootstrap/scss/_utilities";
#import "../../terceros/bootstrap/scss/_print";
Then in global.scss I changed the bootstrap.scss import line to import only bootstrap/_sass-componentes.scss
Finally, in site.scss I included global.scss (such as it was before) and then full Bootstrap files trough bootstrap/_config.scss. **
** After importing _config.scss I also import my Bootstrap customizations. For doing them I followed the recomendation of the linked article although they do not apply directly to my own question.
I have just started a angular-7 based web application with sass, when I import scss within "styles.scss" then it works perfectly throughout the application but when I am trying to add/override css within component(profile.component.scss) then it's not working.
Angular CLI: 7.1.4
Angular: 7.1.4
Node: 11.6.0
Here are "angular.json" css structure of the application ---
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
"node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css",
"src/styles.scss"
],
Here are "styles.scss" structure that added for the application ---
#import "assets/scss/custom-mixin";
#import "assets/scss/header";
#import "assets/scss/page";
#import "assets/scss/footer";
#import "assets/scss/login";
#import "assets/scss/profile";
#import "assets/scss/profile-edit";
#import "assets/scss/privacy";
#import "assets/scss/search";
#import "assets/scss/testimonial";
#import "assets/scss/public-profile";
#import "assets/scss/card-builder";
#import "assets/scss/rtl";
#import "assets/scss/responsive";
Please check the above described structure and let me know if you find any error/mistakes within this and provide me specific way to work both css for the application.
You need to tell the angular compiler where to look for your scss files.
Add this to your angular.json file above your "styles" property:
"stylePreprocessorOptions": {
"includePaths": [
"src/theming"
]
}
Now create a directory src/themeing and add whatever .scss files you want.
You can then #import 'mycustomstuff' where src/theming/mycustomstuff.scss exists.
Hope this helps! If you're still stuck please provide us with your component.ts file(s).
You have to add new CSS file and include below the styles.scss then you can override the CSS.
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
"node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css",
"src/styles.scss",
"src/custom.css"
]
I'm trying to import my css/sass files in order. Somehow my css gets messed up as my bulma framework imports, overwrites all classes coming later.
require("./index.scss");
in my index.scss i Import bulma (framerwork) first and after this an entryPoint.scss which imports other sass/css files from the assets directory.
#import '~bulma/bulma';
#import 'app/assets/sass/entryPoint.scss';
and my entryPoint.scss
#import "helper/_helper.scss";
#import "helper/_spacing.scss";
#import "global/global.scss";
Somehow later imported classes are overwritten my the main classes imported by bulma in my index.scss. All classes in "helper" are overwritten by the main classes in the bulma framework.
Any ideas? I'm using the create-react-app npm script.
What classes are being overriden? My hunch is that you are trying to compete with Bulma classes that are marked with the important rule. If you intend to override these classes in a later file, you will likewise have to mark them as !important. That being sad, I would avoid throwing around the important rule unless absolutely necessary as it is easy to misuse.
In your case, I would try the following:
index.scss
#import "../node_modules/bulma/bulma";
#import "./helpers";
helpers.scss
.is-marginless {
margin: 3em !important;
}
In my angular.json this is what I have
"styles": [
"src/assets/styles.scss"
],
and in my styles.scss, I added my custom.scss
#import 'vendor/bootstrap/scss/custom';
in my custom.scss, this is what I have
// custom 24 grid system
$grid-columns: 24;
#import "node_modules/bootstrap/scss/bootstrap";
In my SASS partials files, I can use the bootstrap 4 mixins without importing my custom.scss file but for a scss file that's coupled with an Angular component, I have to import custom.scss file like this to use any of the bootstrap 4 mixins.
#import 'vendor/bootstrap/scss/custom';
but if I do this, in my style sheet, I see bootstrap being imported twice. How can I avoid duplicate imports? I've tried to add my custom.scss straight to my angular.json file but that also duplicated the import.
Anybody knows how to override bootstrap css based on variables.less variables value on client side. After compilation of bootstrap.less it is taking variables.less values but I want to override bootstrap.css or any custom.css.
If you are working with LESS (or SASS), just import bootstrap less files and put your custom variables less after bootstrap's one:
// Core variables and mixins
#import "variables.less";
#import "myCustomVars.less"; // YOUR CUSTOM VARS
#import "mixins.less";
// Core CSS
#import "scaffolding.less";
ETC....