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....
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'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.
I couldn't find anywhere which less files are required for a minimum Bootstrap website design.
I just want to download the LESS files from github, modify to get my own theme and compile the CSS.
The website should be responsive of course and have only navigation, grid system, typography and buttons.
What are the minimum required LESS files to compile the right CSS? No fuss such as panels, wells, tables etc is needed!
Many thanks for any recommendations.
As you have it in its sources as well, they are the following:
// Core variables and mixins
#import "variables.lessimport";
#import "mixins.lessimport";
// Reset
#import "normalize.lessimport";
#import "print.lessimport";
// Core CSS
#import "scaffolding.lessimport";
#import "type.lessimport";
#import "code.lessimport";
#import "grid.lessimport";
#import "tables.lessimport";
#import "forms.lessimport";
#import "buttons.lessimport";
So you'd only have to comment out the rest of the file and recompile the whole thing. And you should get the desired results
I'm looking for ways to optimize my WordPress instance. The theme has about 8-10 CSS files that are rendered in the functions.php. Consequently, I do not want to change any file names because that would mean that I have to hack the theme and I want to keep that to a bare minimum.
I want to use SCSS to combine these CSS files into one CSS file and include the new file in the theme instead. When I try...
#import "style.css";
#import "reset.css";
#import "shortcodes-styles.css";
It renders as
#import url(style.css);
#import url(reset.css);
#import url(shortcodes-styles.css);
How can I get SCSS to import the CSS as partials without changing the file names? I'm also using CodeKit if that makes a difference.
Not possible. Sass only compiles Sass files: https://github.com/nex3/sass/issues/556