I need to style react-big-calendar as per my application styling. This can be achieved by writing custom css classes and importing them. But I am wondering if there is any way to change SCSS variables.
Thanks in advance!!
RBC provides SCSS for you to use in compiling your own CSS, overriding any of it's variables with your own. In your own SCSS file:
#import '~react-big-calendar/lib/sass/styles';
// your override variables and classes
Related
I created a personal UI-framework (react-components),and want to share the framework with some of my projects.
For good management, I want to upload my framework on NPM.
I used SCSS for my framework consisting of one global SCSS variables file.
How would I approach this if I want to use a different global variable value for each project? I want to set my global variable file out of the node-modules folder.
Would this affect global variables into the node-module from out of the node-modules folder?
Any solution would be greatly appreciated.
SCSS allows you to define default values for variables, which can be overruled.
Example file in your project app.scss
$some_color: blue;
#import 'node_modules/yourframework/main'; // This is your frameworks main file
Example file in your framework node_modules/yourframework/main.scss
$some_color: red !default;
body{
background-color: $some_color;
}
This will result in your body's background being blue.
Good luck!
Im looking for a trick to make my life easier. I want to style each component in my nuxtjs application with a similar color palette, but I do need to enter the color palette in each component. Tried to use scss for the first time. How do I put variables more globally and how to reach them?
I tried to put the code into assets/scss/styles.scss But components know nothing, about remote scss.
$color1: #808060;
$color2: #3D3D34;
$color3: #151510;
$color4: #090906;
As #jayce444 mentioned, this thread will give you multiple options to achieve the task.
However, you need to think before you take this approach. In general, you should import your variables file in each component SCSS:
<style lang="scss">
#import "<PATH_TO_ROOT>/assets/scss/styles.scss";
.someclass { color: $some-variable; }
</style>
By doing this, you will protect yourself for many uncertain future possibilities. Some of them are:
Splitting repository into multiple micro front-ends
Moving into Lerna like Mono repo setup
Reusing component in other code-bases
Being explicit is more maintainable than having magical auto/global imports. We, as developers, spend more time maintaining code than writing new code.
Alternately, another clean solution is not using vue-loader for managing SCSS. It means you should not use style tag inside .vue files.
Create one master style.scss file. For each component create dedicated .scss file. And import all these files into master style.scss like:
// External third party scss from node_modules
#import '~#material/button/button`;
// Base color style sheet (SCSS variable are global)
// By importing it here, all the subsequent .scss file have access to variables
#import './styles/colors`;
#import './components/component-1`;
#import './components/component-2`;
// .... Add remaining component
#import './components/component-n`;
There are a few advantages. Your stylesheet is no longer tied to the framework specific abstraction. You can reuse your style more easily with other code bases built on top of other frameworks. Of course, if you need to have Scoped-CSS which .vue files provide out-of-box, consider using BEM notation.
Finally, if you decide to import variables .scss file in each component, then you can use node-sass and webpack aliases to shorten the import path.
I know this is an old question but the answer still might help someone.
So to include the variables, mixins any SCSS style globally you need to load it using NuxtJS Style resource.
So for example you would have the settings.scss file in /assets/scss
$color-one: #fff;
$color-two: #000;
And you would import it in nuxt.config.js through styleResources object
styleResources: {
scss: ['assets/scss/settings.scss']
},
Make sure to read the Style Resources documentation for more info
I would like to customise Twitter Bootstrap using SASS. I have all my SASS files in my project. I was thinking that it would be a good idea to "override" all classes I use in html by using #extend of the really same class from Bootstrap.
This would give me the ability to upgrade the Bootstrap without warring if any class name has changed. All I can even change used classes quite easily later.
My custom Sass:
...
#import "bootstrap/buttons";
.btn {
#extend .btn;
}
...
The problem here is that the import put everything what is in that file to final css. I have the question if I should customise the class namespace like this way or if it is not a good idea and I should customise the framework just using the variables and further class customisation?
Thanks,
Mateo
Overhead won't be too big and if you keep imports before your "dependency injection" it should be all ok. But i don't know how useful it is in a long run. If they change class name then the properties also change and JS works with the native classes. Also it might have some potential problems with the override priority.
I've got a rails app using the bootstrap-sass gem. I'd like to change the width the navbar collapses from tablet (979px) to phone (769px). Overriding a media query isn't a tidy solution.
I've edited #navbarCollapseWidth in variables.less and built bootstrap, then copied the contents bootstrap-responsive.css into responsive.scss in gems...vendor/assets/stylesheets/bootstrap. Now however, I've lost the ability to update the gem without losing my changes.
What's the best method here? I'd like to make what I think is a simple change but keep my gem update-able. Perhaps using #import "bootstrap-responsive-mine"; in application.css.scss then manually updating that file when I need to?
Did you read some info about configuration this gem?
Import "bootstrap" in your SCSS file of choice to get all of Bootstrap's styles, mixins and variables!
#import "bootstrap";
Need to configure a variable or two? Simply define the value of the
variable you want to change before importing Bootstrap. Sass will
respect your existing definition rather than overwriting it with the
Bootstrap defaults.
$navbarCollapseWidth: 769px;
#import "bootstrap";
Or that is not what you need?
I am trying to use LESS variables in Twitter Bootstrap but cant seem to get them to render in my application.css file
So when i setup bootstrap i installed
rails generate bootstrap:install --less
Which gave me my
bootstrap_and_overrides.css.less
So my understanding is that in this file i can set my LESS variables like so
#white:#FFFFFF;
and then in my css file i can just call them like so
color: #white;
In my bootstrap.less file i call these
#import "twitter/bootstrap/bootstrap";
#import "twitter/bootstrap/responsive";
#import "twitter/bootstrap/variables.less";
and in my application.css file i call the bootstrap file
*= require bootstrap_and_overrides
Gemfile
gem 'less-rails'
This doesnt work and my variables are not being applied
Can anyone see anything that i am doing wrong?
any help appreciated
Thanks
... I can set my LESS variables like so
#white:#FFFFFF;
and then in my css file i can just call them like so color: #white;
Hi, I'm not so familiar with using LESS inside Rails, so apologies if I'm off here.
I can only use less variables inside a file which will be compiled. So for example I can set
#white:#FFFFFF in a variables.less file
perhaps in a custom.less file I have
.light{
color:#white;
}
After I've compiled everything I can use the class .light in my CSS
So to address your quote above, you can set your less variables like
#white:#ffffff
and then you can use that variable in another less file which will be compiled, but not directly in a CSS file.