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.
Related
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 have been using #import to pull in external stylesheets (animate.css, for instance) into my main, .scss stylesheets for quite some time.
I now discovered that #import is being deprecated and has been replaced with #use. However, I am unable to find a proper example of the syntax #use is expecting when importing external files.
With #import, I would have something like this:
#import url('../assets/css/animate.css');
The above would go grab the animate.css file in my /assets/css/ directory, and embed it into my main .scss stylesheet.
From the documentation here, https://sass-lang.com/documentation/at-rules/use, I see that #use is expecting modules to be loaded via their namespace, and to create a namespace from an external resource, I should use:
#use '<url>' as <namespace>;
So I tried the following:
#use '../assets/css/animate.css' as animation;
However, that actually causes an error when compiling, and even if it did not, what am I supposed to do with 'animation' once it is a namespace?
Should I just go back to including separate, individual stylesheets in the <head>, or has someone out there figured out how to make #use work in the way I was using #import before?
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);
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';
Using Sass (SCSS) / Compass, is it possible to import some CSS/SCSS into your code from an externally hosted file?
I am hosting a jQuery plugin on a CDN and want to keep the CSS in the same location so I don't lose it. However, I'd also like to have the option to be able to pull the CSS into my code and have it compile within my main CSS rather than pulling in an extra CSS file in my HTML. Is this possible?
For those of you who came here looking for a way of importing a CDN as a sass #import I found the answer here: https://github.com/webpack-contrib/sass-loader/issues/246
This is how you do it (using bootstrap as an example):
styles.scss
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css);
Sass will not compile any files from a remote location, all files must be accessible from the filesystem (local hard disk, shared network drive, mounted drive, etc.).
Sass also does not compile CSS files at all. https://github.com/nex3/sass/issues/556
#import "my.css";
Compiles to
#import "my.css";
Perhaps you might be interested in Compass extensions?
You sure can. In this context, it works exactly as the standard CSS #import rule. Just give it a URL to the CDN-hosted CSS file.
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import
#import url("http://fonts.googleapis.com/css?family=#{$family}");
Imports where the URL ends with .css.
#import "theme.css";
Imports where the URL begins http:// or https://.
#import "http://fonts.googleapis.com/css?family=Droid+Sans";
Imports where the URL is written as a url().
#import url(theme);
Imports that have media queries.
#import "landscape" screen and (orientation: landscape);
Yes, you can import external css file using PostCSS Import URL Plugin. It will pull the external CSS into your code, so you could compile it within your main CSS.
#import url('https://example.com/path/filename.scss');
Use import statement to import an external scss file to you local.