javascript - 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在我的风格标签上使用

任何想法都会非常有用。

标签： javascriptvue.jsnetlify

Answer 1

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