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);
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 have installed argon design system using npm. And inside the head tag, I have added links from the documentation. But I want to extract it from node modules using mix. And run in webpack so that it renders styles. Please, someone, help with a detailed answer.
import the argon js file (in bootstrap.js for example if you're using the default laravel boilerplate) after popper, jquery and bootstrap:
require("argon-design-system-free/assets/js/argon-design-system");
and the css file (in app.scss if you're using it):
#import "~argon-design-system-free/assets/css/argon-design-system.css";
if you want the nucleo icons import then before the css file:
#import "~argon-design-system-free/assets/css/nucleo-icons.css";
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';
I have a Laravel application. I downloaded an admin_template and integrated it into my app. I use Font Awesome with CDN in my admin-template, and it works no problem.
In the front pages of the application, I can't use Font Awesome. I tried all the way, (downloaded, CDN used, etc.) but no luck. Can anybody help me?
I tried this also https://stackoverflow.com/a/43819770/9145012
I'm using Font Awesome 4.7.
Thanks.
I use yarn add it:
yarn add font-awesome
modify app.scss:
#import '~font-awesome/scss/font-awesome';
$fa-font-path: '/fonts/font-awesome';
and webpack.mix.js:
mix.options({
processCssUrls: false
});
mix.copy('./node_modules/font-awesome/fonts/**', 'public/fonts/font-awesome');