Tailwind 无法在 Laravel 中加载我的自定义字体

Posted 2023-03-07

【中文标题】Tailwind 无法在 Laravel 中加载我的自定义字体

【英文标题】：Tailwind can't load my custom font in Laravel

【发布时间】：2021-10-24 05:50:12

【问题描述】：

我想使用自定义字体，例如。蒙特塞拉特，在我的基于 Laravel 8 和 VueJS3 的应用程序中，我尝试了许多我在互联网上找到的解决方案，但没有一个有效。不管我做什么，我仍然有 Nunito 等作为我的默认字体。当然，当我添加这个时它起作用了

style="font-family :Monserrat"

到 html，但这不是解决方案。

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = 
    purge: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/js/**/*.js',
        './resources/**/*.vue',
    ],

    theme: 
        customForms: theme => (
            default: 
                radio: 
                    iconColor: theme('colors.yellow.500'),
                ,
            ,
        ),
    fontFamily: 
        sans: ['Montserrat'],
        serif: ['Montserrat'],
        mono: ['Montserrat'],
        display: ['Montserrat'],
        body: ['Montserrat']

    ,
    variants: 
        extend: 
            opacity: ['disabled'],
        ,
    ,
    darkMode: 'media',
    plugins: [
        require('@tailwindcss/custom-forms'),],
;

webpack.mix.js

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


mix
    .js('resources/js/admin/app.js', 'public/js/admin')
    .js('resources/js/app_mobile.js', 'public/js/')
    .js('resources/js/app.js', 'public/js/').vue()

    .sass('resources/sass/admin/app.scss', 'public/css/admin')
    .sass('resources/sass/app.scss', 'public/css/', , [tailwindcss('./tailwind.config.js')])
    .options(
        processCssUrls: false,
    )
    .version();

app.scss

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "variables";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/brands";
@import "~@fortawesome/fontawesome-free/scss/regular";

@import "layout";

【问题讨论】：

您在视图中实际使用的是什么字体？

它非常像here。你能展示你是如何在你的 HTML 中实现的吗？

【参考方案1】：

问题已解决

当前应用程序代码引用了一个旧编译的 app.min.css 文件，该文件存在且未被错误删除。

同时，Laravel mix & sass 正在编译一个 app.css 文件，该文件根本没有在应用程序中使用。