How to add font-awesome to laravel project.
I ran:
npm install font-awesome
But what is next, how to import it in my app.scss what is correct path?
I am trying :
#import "/node_modules/font-awesome/scss/font-awesome.scss";
But get and error:
ERROR in ./resources/assets/sass/app.scss
Module build failed: ModuleBuildError: Module build failed:
#import "/node_modules/font-awesome/scss/font-awesome.scss";
If you're pulling a file in from your node_modules directory you can use ~ followed by the path to the file inside node_modules:
#import '~font-awesome/scss/font-awesome';
If you have:
mix.options({
processCssUrls: false
});
Then you will need to copy the files in your webpack.mix.js file with something like:
mix.copy('./node_modules/font-awesome/fonts/**', 'public/fonts/font-awesome');
And then above the #import in your .scss file have:
$fa-font-path: '/fonts/font-awesome';
Related
I am having a hard time installing the swwetalert2 package.
npm i sweetalert2 - its fine.
the package is inside node_modules.
inside my app.css i tried different variation of the #import
#import '/sweetalert2';
#import '~sweetalert2';
#import 'sweetalert2/dist';
but every time I run npm run dev or production I get this:
ERROR in ./resources/css/app.css
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Failed to find 'sweetalert2'
no matter the variation I use for the location.
I want to use bs treeview.js library in my laravel project and i don't know how to do it. So far I have done the following:
npm install --save bstreeview
I added require ('bstreeview'); in resources/js/app.js
When I try to compile it with npm run dev I get the
ERROR in ./resources/js/app.js Module not found: Error: Can't resolve
'./bstreeview' in (...)
What am I doing wrong?
i have check this package there is not index.js
so you can't import directly you can include file like this
import 'bstreeview/dist/js/bstreeview.min.js';
require ('bstreeview'); it's means node is looking for index.js insde
node_module/bstreeview/index.js but in this package it is not there so u need to manually import like above mentioned
for
jquery
run npm i jquery
and inside bootstrap.js add this
window.$ = window.jQuery = require('jquery');
I have clear Laravel 5.7 installation and I need to install izimodal package
So I have installed by npm install izimodal.
For the next step, I initialized this package in my /resources/js/bootstrap.js like:
import iziModal from 'izimodal/js/iziModal';
$.fn.iziModal = iziModal;
and run npm run dev to compile app.js
At this stage, the package was successfully imported and working but I missing CSS part of izimodal... How can I correctly initialize this package with CSS? I have tried this code in my webpack.mix.js but it does not work:
mix.copy('node_modules/izimodal/css/iziModal.css', 'resources/css');
mix.styles([
'resources/css/reset.css',
'resources/css/style.css'
], 'public/css/app.css');
Solved. Just added to my app.scss
// npm-package
#import "~izimodal/css/iziModal.css";
// Custom CSS
#import "../css/reset.css";
#import "../css/style.css";
I want to use the Tabler administration panel on Laravel. I'm attempting to install Tabler UI with npm.
npm install tabler-ui
I add the tabler package to resources/sass/tabler.scss and then add the SASS file to webpack.mix.js.
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/tabler.scss', 'public/css');
But after trying to npm run watch, I got the following error.
File to import not found or unreadable:
../../../node_modules/bootstrap/scss/bootstrap.scss.
When I check the node_modules/tabler-ui/src/assets/scss/bundle I find a line which imports the bootstrap:
#import '../../../node_modules/bootstrap/scss/bootstrap.scss';
The error is for this line; I think this line should be like this:
#import '~bootstrap/scss/bootstrap.scss';
I cannot change this line because it is in the /node_modules folder. What should I do to solve this problem?
In your app.scss
replace this:
// Bootstrap
#import '~bootstrap/scss/bootstrap';
with this:
// Tabler
#import '~tabler-ui/src/assets/scss/variables';
#import '~bootstrap/scss/bootstrap';
#import '~tabler-ui/src/assets/scss/dashboard/dashboard';
Looks like bootstrap is a peer dependency.
Run npm install bootstrap to install it
I have installed font-awesome with npm with following command :
npm install font-awesome --save
And then i have add following line in app.scss
#import "~font-awesome/scss/font-awesome";
Then i have run npm run watch
I have checked manually font-awesome folder is there inside the node_modules directory.
But in my webpage icon not displayed and in console i have seen following Error
GET
http://localhost/fonts/vendor/font-awesome/fontawesome-webfont.woff2?af7ae505a9eed503f8b8e6982036873e
net::ERR_ABORTED GET
How do i resolve the issue?
Since your are using Laravel, you need to write the following line in resources/asset/sass/_variables.scss:
$fa-font-path: "~font-awesome/fonts/";
Now in your resources/assets/sass/app.scss, write:
#import "~font-awesome/scss/font-awesome";