Next.JS -> 提供了一个空的 PostCSS 插件

Posted 2023-03-07

【中文标题】Next.JS -> 提供了一个空的 PostCSS 插件

【英文标题】：Next.JS -> A null PostCSS plugin was provided

【发布时间】：2021-01-19 15:06:47

【问题描述】：

我将 tailwindcss 与 Next.JS 一起使用，并且在每次首次构建时都会出现此错误。它没有任何问题，但我不知道为什么我会得到这个。你能帮忙吗？

tailwind.css

    /* purgecss start ignore */
@tailwind  base;
@tailwind  components;
/* purgecss end ignore */
@tailwind  utilities;

postcss.config.js

 const purgecss = [
    '@fullhuman/postcss-purgecss',
    
        // Specify the paths to all of the template files
        content: [
            './layout/**/*.js,jsx,ts,tsx',
            './compoents/**/*.js,jsx,ts,tsx',
            './pages/**/*.js,jsx,ts,tsx'
        ],
        // This is the function used to extract class names from the templates
        defaultExtractor: (content) => 
            // Capture as liberally as possible, including things like `h-(screen-1.5)`
            const broadMatches = content.match(/[^<>"'`\\s]*[^<>"'`\\s:]/g) || [];
            // Capture classes within other delimiters like .block(class="w-1/2") in Pug
            const innerMatches = content.match(/[^<>"'`\\s.()]*[^<>"'`\\s.():]/g) || [];
            return broadMatches.concat(innerMatches);
        ,
    ,
];
module.exports = 
    plugins: [
        'tailwindcss',
        process.env.NODE_ENV === 'production' ? purgecss : undefined,
        'postcss-preset-env',
    ],
;

tailwind.config.js

module.exports = 
  future: 
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  ,
  purge: [],
  theme: 
    extend: ,
  ,
  variants: ,
  plugins: [],

【问题讨论】：

你知道了吗，我刚开始遇到同样的问题。

【参考方案1】：

From this article:

当您运行npm run dev 时，您可能会收到有关“提供了空 PostCSS 插件”的警告。该警告是postcss.config.js 在您不生产时返回undefined 而不是 PurgeCSS 的工件。可以放心地忽略它。