Настройка postcss-uncss для Laravel Mix - PullRequest
Новая
       46

Настройка postcss-uncss для Laravel Mix

1 голос
/ 12 июня 2019

Я пытаюсь удалить неиспользуемые правила CSS из одного или нескольких файлов sass.

Исследования привели меня к postcss-uncss как к лучшему варианту удаления неиспользуемых CSS, если вы не используете рендеринг на стороне сервера.(см .: https://www.purgecss.com/comparison)

https://github.com/uncss/postcss-uncss

Теперь postcss-uncss - это оболочка для uncss: https://github.com/uncss/uncss Однако документация uncss меня смущает, ипример конфигурации здесь бесполезен: https://github.com/uncss/postcss-uncss#example-configuration

Как настроить postcss-uncss для Laravel Mix?

Это то, что у меня есть: 

mix.js('resources/js/app.js', 'public/js')
    .options({
        processCssUrls: false,
        postCss: [
            require('postcss-uncss'),
            tailwindcss('./tailwind.config.js')
        ],
    })

Я хочу:

  1. Скажите ему, какие маршруты laravel использовать (или «все» также должно подойти)
  2. Где находятся мои файлы sass / scss: / resources / sass /* (файлы примеров: /resources/sass/app.scss, /resources/sass/admin/admin.scss и т. д.)
  3. Куда поместить вывод, т.е. скомпилированный (и очищенный) css без неиспользованногоrules: / public / css / * (чтобы сохранить ту же структуру, например: /public/app.css, /public/admin/admin.css, etc)

Мы будем очень признательны за мысли.

Ответы [ 2 ]

0 голосов
/ 02 июля 2019

Это то, чем я в конечном итоге занимался (оказывается, использование purgecss - лучший вариант, чем uncss, согласно моей беседе с Адамом Уотаном 

let mix = require('laravel-mix');

const tailwindcss = require('tailwindcss');

// Removes unused CSS
// According to Discord chat: Running Purge CSS as part of Post CSS is a ton faster than laravel-mix-purgecss
// But if that doesn't work use https://github.com/spatie/laravel-mix-purgecss
const purgecss = require('@fullhuman/postcss-purgecss')({
  // Specify the paths to all of the template files in your project 
  content: [
    './resources/views/*.php',
    './resources/views/**/*.php',
    './resources/js/components/*.vue',
    './resources/js/components/**/*.vue',
  ],

  // Include any special characters you're using in this regular expression
  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
});

mix.options({
        clearConsole: true, // in watch mode, clears console after every build
        processCssUrls: false,
        postCss: [
            //require('tailwindcss'),
            tailwindcss('./tailwind.config.js'),

            // to enable purgecss on production only
            ...process.env.NODE_ENV === 'production' ? [purgecss] : []

            // to enable on all environments, local and production
            //purgecss
        ],
    })
   ;
0 голосов
/ 02 июля 2019

Возможно, вы можете попробовать пакет Spatie ?

Давайте установим его. 

npm i laravel-mix-purgecss

Вызовите purgeCss () в вашем webpack.mix.js. 

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .purgeCss({ enabled: true });
...