Vitejs + autoprefixer - проще некуда #vitejs #javascript #postcss #autoprefixer

preview_player
Показать описание
Рассматриваем как с помощью пары строчек кода подружить vitejs с autoprefixer

Исходные файлы проекта здесь:

Полезные видео по настройке webpack:

Самый простой способ установить nodejs на Linux и Mac:

#easyit #javascript #js #vitejs #vanillajs
  1. Easy IT
  2. javascript
  3. webpack
  4. vite
  5. vitejs
  6. vite js
Рекомендации по теме
Vitejs + autoprefixer 0:06:16

Vitejs + autoprefixer - проще некуда #vitejs #javascript #postcss #autoprefixer

How To Setup 0:00:31

How To Setup A Sass Compiler And CSS AutoPrefixer In Just 20 Seconds

Знакомимся с Vitejs. 0:16:12

Знакомимся с Vitejs. Портирование проекта, собираемого с помощью Webpack 5 на Vitejs | Vitejs config...

Autoprefixer. Кроссбраузерный css 0:07:32

Autoprefixer. Кроссбраузерный css с помощью gulp autoprefixer.

How to install 0:00:59

How to install ReactJs and Sass with Vite | #shorts

Every modern site 0:18:58

Every modern site should be using PostCSS!

How to use 0:06:50

How to use CSS modules with Vite | postcss modules

Заменяем сборку на 0:02:01

Заменяем сборку на vite plugin

Минифицируем css (css 0:04:12

Минифицируем css (css minify) + autoprefixer | Скорость сайта #4

Automatically Add Vendor 0:01:16

Automatically Add Vendor Prefixes To Your CSS Code

👌POSTCSS + AUTOPREFIXER 0:14:06

👌POSTCSS + AUTOPREFIXER - Optimiza al MÁXIMO tu CSS

Универсальный СТАРТОВЫЙ ШАБЛОН 0:13:36

Универсальный СТАРТОВЫЙ ШАБЛОН для твоих пэт-проектов с JS, SASS и Vite [2023]...

⚡️ Vite - 3:34:44

⚡️ Vite - Быстрая Сборка JavaScript Проектов | Полный курс

Ответы на вопросы. 0:10:41

Ответы на вопросы. Подключаем UnCSS и упорядочиваем assets #easyit #javascript #js #vitejs #vitest...

VITEJS NEW WEBPACK 0:09:03

VITEJS NEW WEBPACK FOR REACT VANILIA VUE AND SVELTE DARIJA MAROC

Builds with Vite 0:03:48

Builds with Vite #3 - CSS imports

Vite - Vue 0:03:02

Vite - Vue - Sass

Vite | сборщик 0:05:38

Vite | сборщик нового поколения #4 - Импорт CSS модулей

HTML, CSS (SCSS), 0:02:45

HTML, CSS (SCSS), JS, GIT, VITE • ХАРДКОР ИНТЕНСИВ 2022

Presentation du thème 0:21:34

Presentation du thème WordPress Press-Wind (TaiwindCSS, ViteJS)

Builds with Vite 0:05:30

Builds with Vite #5 - PostCSS plugins (TailwindCSS installation)

Пример конфигурации сборки 0:12:16

Пример конфигурации сборки мульти-страничного проекта с помощью Webpack 5 и Vite.js...

Vite | сборщик 0:07:22

Vite | сборщик нового поколения #17 - Сборки для многостраничных приложений...

Eslint Plugin For 0:00:41

Eslint Plugin For React Query To Always Have Your Back

Комментарии
Автор

По сути простое видео - увидел бы вчера сэкономил бы себе 6 часов)))) От души автору - спасибо!!!!

VUIVR
Автор

Дай бог тебе сил и здоровья!! БЛАГОДАРЮ ОТ ДУШИ!!! 🙏

bugoaneo
Автор

Отличный материал! Спасибо автору видео от автора вопроса! :)

alexnov
Автор

За видео спасибо! Заработало!

Было бы очень здорово посмотреть пример настройки сборки Gulp + Vite.js. Сейчас пытаюсь разобраться, есть вопросы, конечно, но основные моменты сделал. С webpack не сложились дела :)

ЕгорОвчинников-ьг
Автор

неделю бля искал это) нашел ура! спасибо

AlibekKulseitov
Автор

Если нужно кому то для typescript просто назовите файл .cjs

Spellforge
Автор

Я перерыл весь интернет, чтобы найти что то вменяемое по вит, и слава богу наткнулся на ваш канал, стало гораздо проще, документация мне как то не очень помогла(
Есть лишь один вопрос, можете продемонстрировать настройку плагина по конвертации изображений в современные форматы, такие как webp, avif, но не удаляя основную картинку, чтоб если браузер не поддерживает вебп, то менять src на подходящий:) заранее спасибо

MrJettann
Автор

Здравствуйте. Подскажите, пожалуйста, есть ли плагин для vite как у gulp (gulp-file-include), чтобы удобно разбивать html разметку на куски? Если сможете записать видео на эту тему, то будет очень хорошо) Спасибо

xonwvml
Автор

Привет, а если я использую react + vite + css module? что то пробовал и не получилось, а в доке autoprefix вообще пишут типа используйте псевдоэлементы, ПАМАГИТЕ HELP 🙂

Andrey-jiwe
Автор

Хз, может версии не те или еще что, но у меня вылетала ошибка, пришлось поиграться с бубном, пофиксить удалось переименовав файл в postcss.config.сjs
И вписать в него module.exports = ({ env }) => ({ plugins: [ require('autoprefixer')() ] })

Иначе не вышло, выбивало ошибку и сборка падала

P.S. никто не прикручивал imagemin и конвертор в webp? Шото ваще не выходит

Masimkaify
Автор

Можно ведь просто добавить module.exports = { plugins: { autoprefixer: {} } } непосредственно в vite.config.js, вместо создания postcss.config.js файла?

Michael-mksm