I am trying to customize Bulma by overriding some Sass variables.
In my app.scss file I import the files using the following order:
#import 'node_modules/bulma/sass/utilities/initial-variables';
#import 'node_modules/bulma/sass/utilities/functions';
#import 'bulma_overrides';
#import 'node_modules/bulma/bulma';
The file bulma_overrides.scss includes the following:
$footer-padding: 3rem 1.5rem 3rem;
$footer-background-color: whitesmoke;
My goal was to make the footer a little bit thinner, and I tried to achieve this by changing the padding from 3rem 1.5rem 6rem to 3rem 1.5rem 3rem. At the same time I am changing the backgroud color to whitesmoke.
After running and successfully building:
npm run watch
I reload the page.
Result:
The background color of the footer changes just fine but the padding does not.
At first, I thought that maybe this is not something we can customize, but the official documentation says that we can:
https://bulma.io/documentation/layout/footer/
Any ideas why? By the way, I faced the same issue with another variable in a previous project, and I can't understand what is going on.
PS1: i am using Laravel 5.7 for this project. No changes are done in webpack.mix.js
PS2: i tried multiple browsers (Chrome, Firefox, Safari, Edge[lol]) but no luck.
Your bulma import is already importing "sass/utilities/_all", so this app.scss worked for me just fine:
// Bulma Overrides
#import 'bulma_overrides';
// Bulma
#import '~bulma/bulma';
Related
I want to use bootstrap (v.5) navbar for a Gatsby project. In principle, it is possible to load components that only belong to the navbar. However, I can't find any information about which components belong to the navbar.
So far these I have these imports but not yet working unfortunately:
global.scss
#import "../../node_modules/bootstrap/scss/functions";
#import "../../node_modules/bootstrap/scss/variables";
#import "../../node_modules/bootstrap/scss/mixins";
#import "../../node_modules/bootstrap/scss/_nav";
#import "../../node_modules/bootstrap/scss/_navbar";
Has anyone done this before? Do you know which components need to be imported to make it work?
Thanks for any help!
I importing it to gatsby-browser.js. Shouldn't it be here?
Yes, that's one option. As well as importing it in the Layout component as the Standard Styling with Global CSS Files suggests.
The problem I guess is the path you're using. From the gatsby-browser.js there's no ../.. path hence the route and the asset is broken.
Try playing around with the path but I bet you can do directly something like:
#import "bootstrap/scss/functions";
#import "bootstrap/scss/variables";
#import "bootstrap/scss/mixins";
#import "bootstrap/scss/_nav";
#import "bootstrap/scss/_navbar";
Note that ./ should also work in the same way so try playing around with the relativity of the paths.
I trying to get BS5 up and running with a simple sass setup. I am following the guidelines and importing the sass partials in the correct order but no margin, padding, color classes are generated for some reason. So when i try to use "bg-primary" or "p-3" they simply don't work. The neccesary classes are not in the compiles stylesheet.
Styling of forms is working as intended and grids but what am i missing to make everything work?
If i include the cdn version of BS5 in my markup everything works perfectly. I am using version 5.1.3
#import "../node_modules/bootstrap/scss/functions";
#import "../node_modules/bootstrap/scss/variables";
#import "../node_modules/bootstrap/scss/mixins";
#import "../node_modules/bootstrap/scss/root";
#import "../node_modules/bootstrap/scss/reboot";
#import "../node_modules/bootstrap/scss/type";
#import "../node_modules/bootstrap/scss/images";
#import "../node_modules/bootstrap/scss/containers";
#import "../node_modules/bootstrap/scss/grid";
#import "../node_modules/bootstrap/scss/modal";
#import "../node_modules/bootstrap/scss/forms";
Seems there is a bug in Parcel js v2 somehow. Compiling this from command line with the sass module only works perfectly. I created an issue on this on Parcels github.
I'm using Laravel Mix, and when I run npm run dev, everything is good, but when I run npm run prod, in minified style.css, all #import url()s get deleted!
Webpack
const mix = require('laravel-mix');
mix.setPublicPath('public');
if (mix.inProduction()) {
mix.version();
}
I have no settings, and I use mix.styles([sources, dist]) to manage my pure CSS style files. In one of my sources, I have something like the following.
#import url(../../dist/icons/font-awesome/css/fontawesome-all.css);
However, when I minify them, all #imports are gone! Is there any setting or something? Is resolve-url-loader a package to manage the kind of such things? If yes, would you please make an excellent example of using it?
To import Font Awesome for compiling assets in Laravel do it this way...
#import '~#fortawesome/fontawesome-free/scss/fontawesome';
#import '~#fortawesome/fontawesome-free/scss/regular';
#import '~#fortawesome/fontawesome-free/scss/solid';
#import '~#fortawesome/fontawesome-free/scss/brands';
See: Laravel 5.7 + Font Awesome
If it is a font-awesome case, just change life easier by using a personal font-awesome personal cdn kit. All you need is to register an account, get a free or pro plan, and get the url.
#import url(your-fontawesome-personal-cdn-link);
Adding color modifier classes to Bulma's navbar is supposed to change the background color (as mentioned here: http://bulma.io/documentation/components/navbar/#colors).
I find that this is working fine if I use the css version. But I"m using the sass version and it is not working.
Any idea why not?
Note -- this is also an unanswered issue on Github: https://github.com/jgthms/bulma/issues/1192
You have to create file like my-bulma-theme.scss, then override needed variables or import other .scss files with variables and finally, import bulma from node_modules and include that my-bulma-theme.scss in your pages/preprocessor.
For example my-bulma-theme.scss:
$navbar-background-color: #f0f0f0;
$another-bulma-variable: 14px;
#import './another-style-variables.scss';
#import '../node_modules/bulma/bulma.sass'; // must be the last thing in file
I updated to version 0.5.2 of Bulma and now it works as it should.
I am attempting to simply change the colour of the "is-primary" class in bulma. I am attempting to write a scss file to change the values without installing bulma via npm. I am attempting to import by using the cloudfare link, is this possible?
this is my scss file:
#import "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4./css/bulma.cssbulma/sass/utilities/initial-variables";
$tech-blue : #2c3e50;
$primary : $tech-blue;
#import "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.3/css/bulma.css";
This file compiles but I cannot find the corresponding css file and makes no affect to my actual page.
I don't think that this is possible. The variables in use by Bulma are only accessible by SCSS. So you need to build the whole thing to have your colors blend in. The rendered CSS already contains:
a {
color: #00d1b2; /* can't change that later on */
…
}
A feature request for Bulma would be to make those variables accessible via CSS variables. That way you could easily customize the look even with the pre-rendered CSS from the CDN.