Nuxt 中的 Tailwind PostCss 配置

Posted 2023-03-07

【中文标题】Nuxt 中的 Tailwind PostCss 配置

【英文标题】：Tailwind PostCss Config in Nuxt

【发布时间】：2021-04-07 09:50:11

【问题描述】：

错误信息

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

【问题讨论】：

来自 Nuxt.js 文档 nuxtjs.org/faq/postcss-plugins.

【参考方案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 docs for the build configuration property