0

我package.json有以下脚本：

我有以下 CSS styles.css（我只使用一个 CSS 文件）：

    .btn {
        @apply rounded py-2 px-4;
    }
    .btn.xs {
        @apply px-1;
    }
    .btn.sm {
        @apply py-1 px-2;
    }
    .btn.md {
        @apply py-2 px-4;
    }


    .btn.normal {
        border: 2px solid #A8A878;
        color: #000;
    }
    .btn.normal:hover {
        background-color: #A8A878;
        color: #FFF;
    }
    .btn.normal:focus {
        --tw-ring-shadow: 0 0 0 2px #A8A87844;
    }

    "scripts": {
        "dev-no-watch": "postcss src/styles.css -o dist/css/styles.css",
        "dev": "postcss src/styles.css -o dist/css/styles.css --watch",
        "build": "cross-env NODE_ENV=production postcss src/styles.css -o dist/css/styles.css && cleancss -o dist/css/styles.css dist/css/styles.css"
    },

运行开发脚本工作正常，生成的代码具有我所有的风格。

运行构建脚本运行没有错误，但是，它删除了我的部分样式，我觉得这令人难以置信。我的.btn样式已应用，但我的.btn.normal样式未应用。

我认为这是由于--tw-ring-shadow属性被清理了cleancss，但是删除了构建脚本的 cleancss 部分，它仍然存在同样的问题。删除cross-env NODE_ENV=production解决了问题，但显然我想缩小文件以进行生产。

一位朋友警告说：

如果您的 CSS 文件有 Tailwind 引用，那么它将在构建过程中运行 purge css。如果发生这种情况，您可以按照此处的说明重新排序文件来避免这种情况

并在这里链接我：

https://tailwindcss.com/docs/optimizing-for-production#removing-all-unused-styles

但是我的 tailwind.config.js 应该没问题：

module.exports = {
    purge: [
        './dist/**/*.html',
        './dist/**/*.js'
    ],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
}

这是我postcss.config.js的后代：

module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer')
    ]
};

我看过的一些链接：

4

1 回答 1

3

我的朋友帮我找到了这个。purgecss删除它在 html 中看不到的类。我的 JS 正在使用类向页面动态添加按钮，而 purgecss 没有看到它们，因此将它们删除。将它们添加到具有类隐藏作品的项目

<span class="hidden normal"></span>

Purgecss 还有一个我将使用的白名单选项。希望这个答案可以帮助任何在动态插入元素时通过清除删除自定义样式的人。

编辑：指向 puprgecss 安全列表文档的链接：https ://purgecss.com/safelisting.html

于 2021-01-13T00:19:42.290 回答