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

Question

我想在我的基于Laravel 8和VueJS3等的应用程序中使用自定义字体，例如Montserrat。我尝试了许多我在网上找到的解决方案，但没有一个奏效。无论我做什么，我仍然使用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";

Answer 1

问题解决了

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

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