PurgeCSS在next.js中删除Tailwind字体

问题描述

我正在建立一个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,'./pages/*.{js,'./components/**/**/*.{js,'./components/**/*.{js,'./components/*.{js,],defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
    }
  ];
  module.exports = {
    plugins: [
      "postcss-import","autoprefixer",...(process.env.NODE_ENV === "production" ? [purgecss] : [])
    ]
  };

这是怎么回事？

预先感谢

解决方法

我能够通过在设置中的html上添加body和safelist来解决此问题。

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的变化使我花了一些时间找出答案

,

我在我的 Vue 项目中设置了这个：

module.exports = {
  content: [
    "./src/**/*.vue",],safelist: [
    "body","html","img","a","g-image","g-image--lazy","g-image--loaded",/-(leave|enter|appear)(|-(to|from|active))$/,/^(?!(|.*?:)cursor-move).+-move$/,/^router-link(|-exact)-active$/,/data-v-.*/,extractors: [
    {
      extractor: (content) => content.match(/[A-z0-9-:\\/]+/g),extensions: ["vue"],},}

根据您使用的 PurgeCSS 版本（我使用的是：v3.1.3），safelist 用于排除模式，在旧版本中您可能必须使用 whitelist相反。