gpt4 book ai didi

reactjs - PurgeCSS 在 next.js 中删除 Tailwind 字体

转载 作者:行者123 更新时间:2023-12-04 01:14:15 26 4
gpt4 key购买 nike

我有一个我正在构建的 next.js 站点,它使用如下特定文本,

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
theme: {
extend: {
fontFamily: {
sans: ['SFMono-Regular', 'Menlo', ...defaultTheme.fontFamily.sans],
},
colors: {
// indigo: '#7D00FF',
blue: '#51B1E8',
red: '#FF0E00',
},
},
},
plugins: [
require('@tailwindcss/ui'),
]
}
出于某种原因,文本样式在部署到 Vercel 时会被清除。这是清除 css 配置。
module.exports = {
plugins: [
"postcss-import",
"tailwindcss",
"autoprefixer"
]
};

const purgecss = [
"@fullhuman/postcss-purgecss",
{
content: [
'./pages/**/**/*.{js,jsx,ts,tsx}',
'./pages/**/*.{js,jsx,ts,tsx}',
'./pages/*.{js,jsx,ts,tsx}',

'./components/**/**/*.{js,jsx,ts,tsx}',
'./components/**/*.{js,jsx,ts,tsx}',
'./components/*.{js,jsx,ts,tsx}',
],
defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
}
];
module.exports = {
plugins: [
"postcss-import",
"tailwindcss",
"autoprefixer",
...(process.env.NODE_ENV === "production" ? [purgecss] : [])
]
};
到底是怎么回事?
提前致谢,

最佳答案

我可以通过添加 html 来解决这个问题和 bodysafelist在设置中。

const purgecss = require('@fullhuman/postcss-purgecss')({
// Specify the paths to all of the template files in your project
content: [
// './src/**/*.html',
'./pages/**/*.vue',
'./layouts/**/*.vue',
'./components/**/*.vue'
],
safelist: ['html', 'body'],

// Include any special characters you're using in this regular expression
defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
})
请注意您拥有哪个版本的 purgecss(检查 package.json):
whitelistPatterns 发生了变化至 safelist我花了一些时间才发现

关于reactjs - PurgeCSS 在 next.js 中删除 Tailwind 字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63870891/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com