Как перестать продувать компоненты попутного ветра - PullRequest
Новая
       65

Как перестать продувать компоненты попутного ветра

0 голосов
/ 10 ноября 2019

Я использую TailwindCSS и Laravel Mix. Я пытаюсь настроить PurgeCSS и получаю его, читая мои файлы шаблонов (работающие с WordPress) и удаляя любой CSS, не входящий в файлы шаблонов.

Однако, как часть Tailwind, я использую @apply вмои файлы scss и те утилиты, которые я применяю, также очищаются, что оставляет меня с неработающим сайтом.

Мои файлы sass находятся в css/dev, и есть app.scss, а затем каталоги с большим количеством файлов вих (base, utilities, custom, components).

Моя webpack.mix.js конфигурация файла выглядит следующим образом: 

mix.scripts(['js/dev/app.js', 'js/dev/navigation.js', 'js/dev/skip-link-focus-fix.js'],
    'js/build/app.js')
    .sass('css/dev/app.scss', 'css/build')
    .options({
        processCssUrls: false,
        postCss: [tailwindcss('./tailwind.config.js')],
    })
    .purgeCss({
        enabled: mix.inProduction(),
        // Your custom globs are merged with the default globs. If you need to
        // fully replace the globs, use the underlying `paths` option instead.
        globs: [
            path.join(__dirname, 'template-parts/*.php'),
            path.join(__dirname, '*.php'),
            path.join(__dirname, 'css/dev/*.scss'),
            path.join(__dirname, 'css/dev/**/*.scss'),
        ],
        extensions: ['html', 'js', 'php', 'scss', 'css'],
    });

Как видите, япопытался установить пути для purgeCss для просмотра путей css, но это не сработало.

Кто-нибудь знает, как этого добиться?

Ответы [ 2 ]

1 голос
/ 14 ноября 2019

Вы компилируете свой scss в css до Очистка запускается, поэтому не нужно очищать ваши файлы .scss только от вашего main.css (или от того, что называется выходным).

Существуют ли ваши скомпилированные имена классов полностью в ваших файлах шаблонов? Если они не соответствуют 100% для классов в ваших шаблонах, то они будут, совершенно правильно, удалены.

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

Таким образом, проблема заключалась в том, что классы WordPress не включались в файлы шаблонов, а затем очищались. Решением было переключиться на использование UnCSS, что позволило мне настроить URL для посещения UnCSS, и оно не будет очищать классы, используемые на этих страницах. Я также включил некоторые стандартные классы WordPress, которые я нашел в списке онлайн.

Моя окончательная конфигурация: 

const uncss = require('postcss-uncss');

mix.js('js/dev/app.js', 'js/build/app.js')
    .sass('css/dev/app.scss', 'css/build')
    .options({
        processCssUrls: false,
        postCss: [
            tailwindcss('./tailwind.config.js'),
            ...process.env.NODE_ENV === 'production' ? [uncss({
                html: [
                    './*.php',
                    './template-parts/*.php',
                    'https://www.example.com',
                    'https://www.example.com/work/',
                    'https://www.example.com/work/example-project/',
                    'https://www.example.com/contact/',
                    'https://www.example.com/blog/',
                    'https://www.example.com/blog/laravel-php-framework/',
                ],
                ignore: [
                    '.rtl',
                    '.home',
                    '.blog',
                    '.archive',
                    '.date',
                    '.error404',
                    '.logged-in',
                    '.admin-bar',
                    '.no-customize-support',
                    '.custom-background',
                    '.wp-custom-logo',
                    '.alignnone',
                    '.alignright',
                    '.alignleft',
                    '.wp-caption',
                    '.wp-caption-text',
                    '.screen-reader-text',
                    '.comment-list',
                    '.grecaptcha-badge',
                    /^search(-.*)?$/,
                    /^(.*)-template(-.*)?$/,
                    /^(.*)?-?single(-.*)?$/,
                    /^postid-(.*)?$/,
                    /^attachmentid-(.*)?$/,
                    /^attachment(-.*)?$/,
                    /^page(-.*)?$/,
                    /^(post-type-)?archive(-.*)?$/,
                    /^author(-.*)?$/,
                    /^category(-.*)?$/,
                    /^tag(-.*)?$/,
                    /^tax-(.*)?$/,
                    /^term-(.*)?$/,
                    /^(.*)?-?paged(-.*)?$/,
                    '.animate',
                    '.animated',
                    '.bounce',
                    '.fadeInDown',
                    '.fadeIn',
                    '.fadeInUp',
                    '.jackInTheBox',
                ]
            })] : [],
        ]
    });

Я также использовал исключение UnCSS из комментариев CSS для очистки: 

/* uncss:ignore start */

my css goes here

/* uncss:ignore end */

В итоге я использовал это для всех своих пользовательских файлов sass, за исключением файлов попутного ветра, так что единственные очищенные селекторы - это утилиты попутного ветра, которые сэкономили мне около 300 КБ

...