使用 npm 在 css 中错误的目录位置

Question

我通过执行以下步骤将 fontawesome 添加到我的网站：

1. webpack.mix.js 配置。

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

2. npm install @fortawesome/fontawesome-free

3. 在我的 package.json 中。

   // Font Awesome
   "dependencies": {
       "@fortawesome/fontawesome-free": "^5.13.0",
   

4. 在我的 app.scss 中

   // Fonts
   @import url('https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700&display=swap');
   @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&display=swap');
   
   // Variables
   @import 'variables';
   
   // Bootstrap
   @import '~bootstrap/scss/bootstrap';
   
   //Fontawesome
   @import '~@fortawesome/fontawesome-free/scss/fontawesome';
   @import '~@fortawesome/fontawesome-free/scss/regular';
   @import '~@fortawesome/fontawesome-free/scss/solid';
   @import '~@fortawesome/fontawesome-free/scss/brands';
   

当我运行npm run dev 时，我的app.css 中的fontawesome css 目录位置是

url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.eot?6b20949b3a679c30d09f64acd5d3317d);

而不是

url(../fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.eot?6b20949b3a679c30d09f64acd5d3317d);

知道如何解决这个问题吗？ Laravel 新手，从 Yii 1 迁移过来。谢谢。

Answer 1

*尝试使用相对路径示例：

@import '../fonts/vendor/@fortawesome/fontawesome-free';