2

First, I've done my search before post this question, the answer that I found didn't work for me.

I did exactly the steps of the answer Laravel 5.7 + Font Awesome

So, I have my mix.js configuration

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

I runed npm install --save @fortawesome/fontawesome-free and tried npm install @fortawesome/fontawesome-free --save-dev

and my dependency in package.json is

 "devDependencies": {
        "@fortawesome/fontawesome-free": "^5.7.2",
        "axios": "^0.18",
        "bootstrap": "^4.0.0",
        "datatables.net-bs4": "^1.10.19",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.5",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.6"
    },
    "dependencies": {
        "font-awesome": "^4.7.0"
    }

Then, I import the styles

// Font Awesome
@import '~@fortawesome/fontawesome-free/scss/brands';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import "~@fortawesome/fontawesome-free/scss/fontawesome";

and I complied with npm run dev

I referenced my CSS file <link type="text/css" rel="stylesheet" href="{{ asset('css/app.css') }}">

After all these steps, I've got the error 404

GET http://localhost/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff2?462806316fea535a6a57651bc2b000b0 net::ERR_ABORTED 404 (Not Found)

But, I do have the files...

enter image description here enter image description here So I think the path would be 

localhost/project/public/fonts....

But I don't know how to change that, thanks for the help

tsu
  • 1,122
  • 1
  • 10
  • 22

2 Answers2

2

Solved with this Post

Set the resource root in the webpack.mix.js using the following: mix.setResourceRoot('../');

Just don't know why this fixes the problem

tsu
  • 1,122
  • 1
  • 10
  • 22
0

Can you please share the screen print of nodes_module folder? Also, was there a compilation error when building with webpack?

I have below in node_module directory and it works fine for me node module image

And i am using below in app.sccs file

@import "~font-awesome/scss/font-awesome.scss";
Ankur Khurana
  • 36
  • 3
  • I updated it, I thought it's the problem of the path, just have no idea to resolve – tsu Feb 23 '19 at 11:08