Nuxt 中的 Tailwind PostCss 配置

Question

错误信息

“请在你的 nuxt.config.js 中使用 build.postcss 而不是外部配置文件。在 Nuxt 3 中将删除对此类文件的支持，因为它们会删除 Nuxt 设置的所有默认值，并可能导致严重的问题，例如在你的内部解析别名等功能CSS。”

题

如何将我的 postcss.config.js 文件更改为在我的 nuxt.config.js 文件中？

postcss.config.js

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

    // This is the function used to extract class names from your 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: [
        require('tailwindcss'),
        require('autoprefixer'),
        ...(process.env.NODE_ENV === 'production' ? [purgecss] : []),
    ],
};

Answer 1

如错误所述，请使用 build.postcss 进行配置。 这意味着您应该将插件放在nuxt.config.js > build > postcss中。 对于您的情况，这看起来像：

export default {
    // other config here like head & target
    build: {
        // other build config like babel
        postcss: {
            plugins: {
                require('tailwindcss'),
                require('autoprefixer'),

                ...(process.env.NODE_ENV === 'production' ? 
                    [require('@fullhuman/postcss-purgecss')
                        ({
                            content: ...,
                            defaultExtractor: ...,
                        })
                    ] : []
                ),
            }
        }
    }
}

您需要的大部分信息都记录在构建配置属性的 Nuxt 文档中