在Laravel 8中安装Tailwind字体

Question

我正在尝试将Font添加到新安装的Laravel 8 Jetstream中，但是收到了以下错误

来自PostCSS插件的未知错误。您当前的PostCSS版本为8.2.4，但postcss-import使用7.0.35。也许这就是下面错误的根源。

错误:未能找到“~@fortawesome/fontawesome/scss/brand”

App.css

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

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

Webpack.mix

mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
    ])
    .webpackConfig(require('./webpack.config'));

if (mix.inProduction()) {
    mix.version();
}

Webpack配置

const path = require('path');

module.exports = {
    resolve: {
        alias: {
            '@': path.resolve('resources/js'),
        },
    },
};

Answer 1

1. 首先，按照以下方式设置webpack.mix.js： mix.js('resources/js/app.js'，'public/js') .postCss('resources/css/app.css'，'public/css'，require('postcss-import')，require(‘.postCss’)，require(‘自动重新定位’)，) .sass('resources/sass/app.scss'，'public/css')；if (mix.inProduction()) { mix.version()；}

2.-继续安装火锅：

npm install --save @fortawesome/fontawesome-free

3.-创建一个新文件"resources/sass/app.scss“并包括以下内容：

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

4.-执行下列命令：

npm install && npm run dev

再一次

npm run dev

。

Answer 2

步骤

在触发拉力维尔混合之前，我们希望在您的计算机上安装Node.js与NPM。

node -v
npm -v

安装拉力维尔混合、Webpack、自动修复程序和PostCSS的节点依赖项。

npm install autoprefixer@latest && npm install laravel-mix@latest && npm install postcss@latest && npm install webpack@latest --save-dev

通过npm软件包管理器安装字体太棒了的最新免费版本。

npm install @fortawesome/fontawesome-free --save-dev

接下来，构建您的webpack.mix.js配置。请注意，默认的Laravel 8安装不再使用SASS (就像我们在以前的Laravel版本中那样)来编译我们的CSS资产。

const mix = require('laravel-mix');

mix.setPublicPath('public')
mix.setResourceRoot('../');

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
    //
]);

下面的依赖项现在应该在您的package.json中。

// Font Awesome
"devDependencies": {
    "@fortawesome/fontawesome-free": "^5.15.3",

在/资源/css/app.css中，根据您感兴趣使用的图标设置，导入一个或多个样式。

@import '~@fortawesome/fontawesome-free/css/fontawesome';
@import '~@fortawesome/fontawesome-free/css/regular';
@import '~@fortawesome/fontawesome-free/css/solid';
@import '~@fortawesome/fontawesome-free/css/brands';

现在，我们希望更新我们的package.json以使用新的混合CLI。请将package.json的“脚本”部分更改为以下内容。

"scripts": {
    "dev": "npm run development",
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "prod": "npm run production",
    "production": "mix --production"
},

编译您的资产，并生成一个小型化的、可生产的构建。

npx mix -p

或

npm run prod

最后，在叶片模板/布局中引用生成的CSS文件。

<link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}">

混在一起快乐！

Answer 3

我让它运行：npm install font-awesome --save

我创建了resources/sass/custom.scss并将.sass('resources/sass/custom.scss', 'public/css');添加到

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
    ])
    .webpackConfig(require('./webpack.config'))
    .sass('resources/sass/custom.scss', 'public/css');

在webpack.mix.js中。

然后将@import "node_modules/font-awesome/scss/font-awesome.scss";添加到resources/sass/custom.scss中。

在running npm run watch之后，字体就可以使用了。