Nuxt 中的 Tailwind PostCss 配置

问题描述

错误信息

“请在您的 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] : []),],};

解决方法

正如错误所说，请使用 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 docs for the build configuration property