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 文檔中