Можно ли подключить только некоторые компоненты в uikit?

Question

[lolrofl01]

Добрый день.
Очень понравилась библиотека uikit, но после работы с онной появилось много неиспользуемого css кода. Оно и понятно, я исползовал от силы 5 компонентов этой библиотеки. Но нигде не написано как их можно отдельно подключить. Это вообще реально? Вроде как во второй версии что-то такое есть в документации, но я пользуюсь третьей, и в документации только примеры подключения полной версии. Подключаю через webpack.

Answer 1

[Just Me]

Во второй было можно. В третьей версии - нет.

Единственный выход - можно обрезать неиспользуемые css классы, но javascript будет подгружаться в любом случае

Comments

[lolrofl01]

Пробовал как раз через purgecss. В результате все страницы на сайте искривились. Использую laravel mix в работе, установил, добавил:

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .purgeCss();

согласно документации: https://laravel-mix.com/extensions/purgecss

В результате кошмар. Такое ощущение, что он удалил как раз те стили, которые я использовал...

[Just Me]

lolrofl01, пропиши в конструктор файлы, которые он будет отслеживать

plugins: [
	new PurgecssPlugin({
	  paths: glob.sync([
		path.join(__dirname, './resources/**/*.php'),
		path.join(__dirname, './resources/**/*.js'),
		path.join(__dirname, './resources/**/*.vue')
	  ]),
	  whitelistPatterns: [/^animation|cke|v-|active/]
	}),
],

в whitelistPatterns регулярками укажи те, которые будут использоваться в разметке потенциально. К примеру, классы vue анимации

[Just Me]

я надеюсь ты этот плагин используешь

npm install purgecss-webpack-plugin

webpack.mix.js

const PurgecssPlugin = require('purgecss-webpack-plugin')

.webpackConfig({
        cache: true,
        plugins: [
            new PurgecssPlugin({
              paths: glob.sync([
                path.join(__dirname, './resources/**/*.php'),
                path.join(__dirname, './resources/**/*.js'),
                path.join(__dirname, './resources/**/*.vue')
              ]),
              whitelistPatterns: [/^animation|cke|v-|active/]
            }),
        ],
        resolve: {
          alias: {
            '@': __dirname + '/resources/js'
          },
        }
    })

[lolrofl01]

Just Me, Почему-то все равно игнор. Удаляет большую часть стилей, в частности те, которые я использую. Пробовал готовый конфиг для лары: https://github.com/spatie/laravel-mix-purgecss/blo... , он вообще ошибку вызывает и не пишет какую конкретно. Написано просто "ошибка при компиляции".

[Just Me]

lolrofl01, убери laravel-mix-purgecss и используй тот плагин, что я описал. Да, там ещё glob надо импортировать, но думаю это понятно

const glob = require('glob-all')