laravel auth vue tailwindcss和fontawesome错误

Posted 2023-03-07

【中文标题】laravel auth vue tailwindcss和fontawesome错误

【英文标题】：laravel auth vue tailwindcss and fontawesome error

【发布时间】：2020-12-02 08:36:35

【问题描述】：

请帮忙。 npm run dev 给我一个错误

ERROR in ./resources/sass/fontawesome_app.scss (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./node_modules/resolve-url-loader??ref--5-4!./node_modules/sass-loader/dist/cjs.js??ref--5-5!./resources/sass/fontawesome_app.scss)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Failed to find '~@fortawesome/fontawesome-free/css/all.css'
  in [
    /var/www/html/resources/sass
  ]
    at /var/www/html/node_modules/postcss-import/lib/resolve-id.js:35:13
 @ ./resources/sass/fontawesome_app.scss 2:14-265

我有一个带有 auth 和 vue 的新 laravel 安装。首先我安装了tailwind；

composer require laravel-frontend-presets/tailwindcss --dev
artisan ui tailwindcss --auth
npm install
npm run dev

Tailwind 从 laravel 项目中删除了一些东西，所以现在我尝试让 fontawesome 再次工作。 （我在安装 tailwindcss 之前让它工作）

npm install --save @fortawesome/fontawesome-free

在 webpack.mix.js 我添加

.sass('resources/sass/fontawesome_app.scss', 'public/css')

我创建了文件 resources/sass/fontawesome_app.scss；

// Fonts
@import '~@fortawesome/fontawesome-free/css/all.css';

在我的welcome.blade.php的头部；

<!-- Styles -->
<link href=" mix('css/app.css') " rel="stylesheet">
<link href=" mix('css/fontawesome_app.css') " rel="stylesheet">

我通过运行编译了所有代码；

npm install && npm run dev

现在我得到了那个错误。我这样命名css，所以它不会与 顺风创建的 webpack 行。

请帮忙！

【参考方案1】：

我将 resources/sass/fontawesome_app.scss 更改为这个，它不再给我任何错误；

// Fonts
$fa-font-path: "../webfonts";
@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import '~@fortawesome/fontawesome-free/scss/solid.scss';
@import '~@fortawesome/fontawesome-free/scss/brands.scss';
@import '~@fortawesome/fontawesome-free/scss/regular.scss';