This is the error i get after importing #fortawesome
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
╷
16 │ #import "~#fortawesome";
│ ^^^^^^^^^^^^^^^
╵
C:\xampp\htdocs\renazaandam\resources\sass\app.scss 16:9 root stylesheet
To install font-awesome you first should install it with npm. So in your project root directory type:
npm install font-awesome --save
Then edit the resources/assets/sass/app.scss file and add at the top this line:
#import "node_modules/font-awesome/scss/font-awesome.scss";
Now you can do for example:
npm run dev
This builds unminified versions of the resources in the correct folders. If you wanted to minify them, you would instead run:
npm run production
And then you can use the font.
Related
Suddenly I received the following error:
app.js:28823 Uncaught Error: Cannot find module 'os'
at webpackMissingModule (app.js:28823)
at Object../node_modules/laravel-mix/src/File.js (app.js:28823)
at __webpack_require__ (app.js:79613)
at Object../resources/js/app.js (app.js:6700)
at __webpack_require__ (app.js:79613)
at app.js:79751
at Function.__webpack_require__.O (app.js:79650)
at app.js:79753
at app.js:79755
I tried deleting the node_module folder and the package-lock.json file, and run npm install, to no avail.
When I launch npm run dev I get the following error:
Error: Can't resolve 'os' in 'C:\...\node_modules\clean-css\lib\options'" -t "Laravel Mix"
UPDATE: I run npm install --save os and this problem was solved. But another one arose! Error: Can't resolve 'fs' and this one doesn't resolve with npm install --save fs
NPM version: 7.18.1
SOLVED: I don't know how in the top of resources\js\app.js file appeared this line:
const { exists } = require("laravel-mix/src/File");
I just deleted it and npm run dev didn't give any more errors.
I hope this answer will help someone else.
This all happens when you auto-import the modules using any extension.
Solution:
delete the package-lock.json file and run:
npm i
it works for me.
Another solution is to remove the
import { exists } from 'laravel-mix/src/File'
from the react component first line and it works.
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 am facing issue while using the following command
npm run production
after execute following command i see following error
ERROR Failed to compile with 5 errors
error in ./resources/assets/sass/app.scss
Module build failed: ModuleBuildError: Module build failed: TypeError: Cannot read property 'map' of undefined
at preparePluginsArray (E:\wamp\www\smm.yasmalik.com\node_modules\svgo\lib\svgo\config.js:64:20)
at module.exports (E:\wamp\www\smm.yasmalik.com\node_modules\svgo\lib\svgo\config.js:32:28)
at new module.exports (E:\wamp\www\smm.yasmalik.com\node_modules\svgo\lib\svgo.js:21:19)
at E:\wamp\www\smm.yasmalik.com\node_modules\postcss-svgo\dist\index.js:95:16
at Object.creator [as postcssSvgo] (E:\wamp\www\smm.yasmalik.com\node_modules\postcss-svgo\node_modules\postcss\lib\postcss.js:150:35)
at E:\wamp\www\smm.yasmalik.com\node_modules\cssnano\dist\index.js:295:40
at Array.forEach (<anonymous>)
at E:\wamp\www\smm.yasmalik.com\node_modules\cssnano\dist\index.js:282:29
at creator (E:\wamp\www\smm.yasmalik.com\node_modules\cssnano\node_modules\postcss\lib\postcss.js:150:35)
at processCss (E:\wamp\www\smm.yasmalik.com\node_modules\css-loader\lib\processCss.js:199:16)
It was issue with my node_modules folder. there were some extra useless packages so simply i just deleted node_modules and install it again with following commands
Step 1
Delete node_modules manually
Step 2
Install the node_modules folder again:
npm i
Step 3
Update existing packages
npm update
That's it!
Probably you have some conflicts with versions of some npm packages.
Try to reinstall npm:
rm -rf node_modules
npm install
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";
I'm using clean and latest Laravel 5.4.
I have an error on npm run dev
ERROR Failed to compile with 4 errors
This dependency was not found:
* -!../../../node_modules/css-loader/index.js?{"url":true,"sourceMap":false}!../assets/fonts/jquery.filer-icons/jquery-filer.css in ./~/css-loader?{"url":true,"sourceMap":false}!./~/postcss-loader?{"sourceMap":false}!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
To install it, you can run: npm install --save -!../../../node_modules/css-loader/index.js?{"url":true,"sourceMap":false}!../assets/fonts/jquery.filer-icons/jquery-filer.css
app.scss:
#import "node_modules/jquery.filer/css/jquery.filer";
jquery.filer.css:
#import url('../assets/fonts/jquery.filer-icons/jquery-filer.css');
I tried to change this path but it doesn't works anyway