CSS 在产品中不起作用。 Vue.js、Tailwind 和 Netlify

Question

我非常困惑...这是我的第二个 vue.js 项目。当我将网站上线时，这给了我很多问题。

该应用程序在本地运行没有任何问题，但在推动 netlify 并构建 CSS 后似乎不起作用。我正在使用 purgecss 这是我的postcss.config.js 文件：

const IN_PRODUCTION = process.env.NODE_ENV === 'production';

module.exports = {
    plugins: [
        require('tailwindcss')('tailwind.js'),
        require('autoprefixer')(),
        IN_PRODUCTION &&
            require('@fullhuman/postcss-purgecss')({
                content: ['./public/**/*.html', './src/**/*.vue'],
                defaultExtractor(content) {
                    const contentWithoutStyleBlocks = content.replace(
                        /<style[^]+?<\/style>/gi,
                        ''
                    );
                    return (
                        contentWithoutStyleBlocks.match(
                            /[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g
                        ) || []
                    );
                },
                whitelist: [],
                whitelistPatterns: [
                    /-(leave|enter|appear)(|-(to|from|active))$/,
                    /^(?!(|.*?:)cursor-move).+-move$/,
                    /^router-link(|-exact)-active$/,
                    /data-v-.*/,
                ],
            }),
    ],
};

按照 TW 和 PurgeCSS 说明。这同样适用于本地......但不适用于生产。

Netlify 构建命令是 npm run build，它来自 dist 文件夹。

您可以在此处查看该应用程序：https://beautify-urls.netlify.app/ 并在这里回购：https://github.com/mrpbennett/beautify-url

我没有在我的样式标签上使用scoped

任何想法都会很受欢迎。

Answer 1

您需要将 发布目录 字段从 dist 更改为 /dist。