Question

场景如下：

使用Tailwindcss和Purgecss删除未使用的类的Vue CLI 3项目。

“ @ ky-is / vue-cli-plugin-tailwind”：“ ^ 1.4.0”

尝试在我的<style>块中导入供应商的css文件，但是在生产构建期间删除了/* csspurge start ignore */和/* csspurge end ignore */注释。

示例：

<style lang="postcss">

/* csspurge start ignore */
@import 'my-vendor-css-file.css';
/* csspurge end ignore */

.my-other-styles-to-be-purged {
 ...
}

</style>

问题在于我的供应商文件已被清除，因为Webpack加载程序在生产构建期间会删除注释。

有关如何将Webpack配置为在Vue CLI 3环境中不执行此操作的任何帮助？我尝试查看css-loader选项，但找不到任何解决方案。

Answer 1

未能弄清楚如何在生产构建期间在Vue组件中保留注释，我发现的解决方法是将我想保留在postcss.config.js文件中的所有供应商类列入白名单：

const isHotReloaded = process.argv.includes('serve')

class TailwindVueExtractor {
    static extract (content) {
        const contentWithoutStyleBlocks = content.replace(/<style[^]+?<\/style>/gi, '')
        return contentWithoutStyleBlocks.match(/[A-Za-z0-9-_:/]+/g) || []
    }
}

const extensionsUsingCSS = [ 'vue', 'html' ]
const extensionsOfCSS = [ 'less', 'pcss', 'postcss', 'sass', 'scss', 'styl' ]

module.exports = {
    plugins: [
        require('postcss-preset-env')({ stage: 2 }),
        require('tailwindcss')('./tailwind.config.js'),
        !isHotReloaded && require('@fullhuman/postcss-purgecss')({
            content: [ `./@(public|src)/**/*.@(${extensionsUsingCSS.join('|')})` ],
            css: [ `./src/**/*.@(${extensionsOfCSS.join('|')})` ],
            whitelistPatterns: [
                /^vue-form-wizard/
            ],
            whitelistPatternsChildren: [
                /vue-form-wizard$/
            ],
            extractors: [
                {
                    extractor: TailwindVueExtractor,
                    extensions: extensionsUsingCSS
                }
            ]
        }),
        require('autoprefixer')()
    ]
}

whitelistPatterns 和 whitelistPatternsChildren 是关键。有关每个功能的更多信息，您可以查看purgecss文档here

并非完全是我想要完成的工作，但它确实有效...

Answer 2

我知道它来晚了，但是您可以使用重要的注释来告诉Webpack不要删除它们。将/* purgecss start ignore */替换为/*! purgecss start ignore */，它应该可以工作。

将CSS注释保留在生产构建中的Vue单个文件组件中？

2 个答案: