If I am importing the /boostrap/scss/_variables.scss file AFTER my custom ./variables.scss file, why can't I access existing global variables of the origin _variables.scss file? Since Bootstrap often uses cascading variable assignments thats a problem since all variables are undefined at first when i include my custom file beforehand.
This is the way i am doing it currently since the Bootstrap docs state that:
// Custom Variables
#import 'variables';
// Variables
#import 'bootstrap/scss/variables';
If i want to be able to access variables of the /boostrap/scss/_variables.scss file, would the right way be a duplicate import like that ?
// Variables
#import 'bootstrap/scss/variables';
// Custom Variables
#import 'variables';
// Variables
#import 'bootstrap/scss/variables';
There will be a bootstrap file which contains all other files of bootstrap,so include only this one listed below and then call your variable.scss file.
#import "../node_modules/bootstrap/scss/bootstrap";
#import "variable.scss" //Custom scss file
For more information you can visit : https://getbootstrap.com/docs/5.2/customize/sass/
Related
Is there a way to remove or disable a SASS #include partial using a preceding variable or dequeue esque method prior to its loading?
I want to use a centralized stock copy of Bootstrap SASS & localized variable override files to build slightly customized CSS files. However, I want to be able to selectively disable unused partials from the stock bootstrap.scss file during the sass build much like using a sass default variable. Is there a way to prevent an #import partial from loading further down in the SASS build chain without editing the stock bootstrap.scss file?
I'm trying to get my head around the best approach to this (or if it's even possible). I have a rather large application i have set the color sass variables globally within two separated files - _theme-dark.scss and _theme-light.scss. Now i would like to allow the user to switch between the two say via a click of a button.
Here's an example of my app.scss file:
app.scss
#import 'modules/theme-dark';
//#import 'modules/theme-light';
FYI switch the code comments between the two files manually works, no i just need to make it dynamic.
I have a _common.scss file which I import to various page.scss files:
page.scss:
#import "common";
#page {
...
}
_common.scss:
#import "partials/all";
#import "components/all";
...
But the problem is, since all my pages import _common.scss, the way I have things structured, if I make any changes inside _common.scss (or any of the files it imports), sass has to rebuild all the page css files. But if I just make _common.scss its own file and call it with a <link> tag (<link href="common.css">), then the page.scss file has errors, because it is trying to use variables and mixins defined in _common.scss and its imports.
Is it possible to structure my project so that the page.scss files can use all the mixins and variables in _common, but so that sass doesn't have to rebuild each page.css file each time I make a change to the common file? i.e. - make it so that sass only builds the common file when a change is made in common, and only builds the page file when a change is made in page?
I would say it is not possible, since the aim is to have one css for each page at the end. This said it HAS to be rebuild if something is changed in common.
Under my app/assets/stylesheets I created a folder components because I like to create styles specific to each one of my html components. This way in my actual sass file (some_page.scss) I can just do a few imports depending on what I need.
for a visual, here's what the folder structure looks like now:
- app
- assets
- stylesheets
- components
_component1.scss
_component2.scss
application.css
page-specific.scss
right now under components I have
_colors.scss // declaring colors for my app
_other_stuff.scss // other stuff...
usually when doing imports, I import colors first so that I can use them in the rest of my components. But rails is complaining:
Showing /Users/abdulahmad/Desktop/rails/password-service/app/views/layouts/application.html.erb where line #5 raised:
Undefined variable: "$green".
am I supposed to do something special to tell rails that I want my sass compiled in the components folder? or is this error being thrown for another reason?
by the way, here are the contents of my page-specific scss file:
#import 'components/colors';
#import 'components/inputs';
Rename your application.css to application.css.scss
And then application.css.scss file has to be like below.
#import "components/*";
#import "page-specific";
I have two less files. one named main.less which imports bootstrap.less (which includes bootstrap variables.. etc.) and dash.less which has just styles for my dashboard. These two files should generate two css files. main.css and dash.css.
I'm including the main.css in to all my pages and the dash.css in to just the dashboard.
What i'm trying to do is: compile the main.less with included bootstrap variables in to main.css. Then compile the dash.less using the bootstrap.less variables in to dash.css. However this will result the contents of bootstrap.less to be included again in the dash.css which i don't want because i'm already including the main.css in my html.
Has anyone ever came across this ?
After trying several methods my decision was to use a grunt task to remove the duplicate css blocks.
Found a way. I had to use import like this:
#import (reference) "bootstrap.less";
.myclass{color:#bootstrap-variable;}
.anotherclass{.classDefinedInBootstrapLessWhichUsesAVariableDefinedInVariablesLess}
Using "reference" will source the imported file but not include it.
Compiling all less files to one file will be good .But if you want to have variables of bootstrap.less in dash.less. Then there is one solution , if you see in bootstrap with less dump in bootstrap.less , component wise less files are included like -
// Core variables and mixins
#import "variables.less";
#import "mixins.less";
// Reset
#import "normalize.less";
#import "print.less";
etc.so if you want to use variables you can import '#import "variables.less"' in your 'dash.less' thats it :)