Сохранять комментарии CSS в отдельных компонентах Vue при сборке? - PullRequest
Новая
       0

Сохранять комментарии CSS в отдельных компонентах Vue при сборке?

0 голосов
/ 14 ноября 2018

Сценарий выглядит следующим образом:

Проект Vue CLI 3 с использованием Tailwindcss и Purgecss для удаления неиспользуемых классов.

"@ ky-is / vue-cli-plugin-tailwind": "^1.4.0 "

Попытка импортировать файл css поставщика в мой блок <style>, но комментарии /* 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>

Проблема в том, что мой файл поставщика очищается, потому что загрузчик веб-пакетов удаляет комментарии во время производственной сборки.

Любая помощь о том, как настроить веб-пакет, чтобы не делать этого в Vue CLI3 среды?Я попытался просмотреть параметры css-загрузчика, но нигде не смог найти решения.

1 Ответ

0 голосов
/ 15 ноября 2018

В случае невозможности выяснить, как сохранить комментарии в компонентах 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')()
    ]
}

Ключи белый список и белый списокPatternsChildren являются ключом.Для получения дополнительной информации о том, что каждый из них выполняет, вы можете проверить документы purgecss здесь

Не совсем то, что я пытался выполнить, но это работает ...

...