Как настроить autoprefixer в сборке vite для vue?
Делал небольшой тестовый проект на Vue для наработки навыка и закрепления знаний. Сборка на vite. При build обнаружил, что в стилях нет префиксов в нужных css свойствах. Не могу понять в чем причина. Вроде в vite.congig все указано
export default defineConfig({ plugins: [vue()], css: { postcss: { plugins: [autoprefixer], }, }, test: { environment: "jsdom", }, resolve: { alias: { "@": fileURLToPath(new URL("./src", import.meta.url)), }, }, server: { host: true, port: 8080, }, }); |
export default defineConfig({ plugins: [vue()], css: { postcss: { plugins: [autoprefixer], }, }, test: { environment: "jsdom", }, resolve: { alias: { "@": fileURLToPath(new URL("./src", import.meta.url)), }, }, server: { host: true, port: 8080, }, });
в package.json нужные зависимости поставлены:
"browserslist": [ "last 2 years", "> 1%", "not dead" ], "devDependencies": { "@pinia/testing": "^0.1.3", "@rushstack/eslint-patch": "^1.5.1", "@vitejs/plugin-vue": "^4.4.0", "@vue/eslint-config-prettier": "^8.0.0", "@vue/test-utils": "^2.4.1", "autoprefixer": "^10.4.17", "eslint": "^8.52.0", "eslint-plugin-vue": "^9.18.1", "jsdom": "^22.1.0", "postcss": "^8.4.33", "prettier": "^3.0.3", "sass": "^1.69.5", "vite": "^4.5.0", "vitest": "^0.34.6" } |
"browserslist": [ "last 2 years", "> 1%", "not dead" ], "devDependencies": { "@pinia/testing": "^0.1.3", "@rushstack/eslint-patch": "^1.5.1", "@vitejs/plugin-vue": "^4.4.0", "@vue/eslint-config-prettier": "^8.0.0", "@vue/test-utils": "^2.4.1", "autoprefixer": "^10.4.17", "eslint": "^8.52.0", "eslint-plugin-vue": "^9.18.1", "jsdom": "^22.1.0", "postcss": "^8.4.33", "prettier": "^3.0.3", "sass": "^1.69.5", "vite": "^4.5.0", "vitest": "^0.34.6" }
Но префиксы не появляются. Что необходимо сделать, чтоб исправить? Полный код тут: https://github.com/MaksBmt/notepad-vue
Дополнительно:
быстро пробежался по css и что-то не увидел свойств, которым нужны префиксы
Посмотрите здесь https://caniuse.com/css-grid график Date relative
У вас условие "last 2 years"
Все браузеры двухлетней давности полностью поддерживают гриды и префиксы им не нужны.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для настройки autoprefixer в сборке Vite для Vue, вам нужно выполнить несколько шагов:
1. Установите необходимые пакеты:
Установите `autoprefixer` и `postcss` пакеты с помощью npm:
```
npm install autoprefixer postcss --save-dev
```
2. Создайте файл postcss.config.js в корне вашего проекта и добавьте следующий код:
```js
module.exports = {
plugins: [
require('autoprefixer'),
],
};
```
3. В файле vite.config.js добавьте следующий код для настройки PostCSS плагина:
```js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
vue(),
],
css: {
postcss: {
plugins: [require('autoprefixer')],
},
},
});
```
4. Перезапустите сервер разработки Vite, чтобы изменения вступили в силу:
```
npm run dev
```
Теперь autoprefixer должен быть настроен в вашей сборке Vite для Vue. Все ваши стили будут автоматически автопрефиксированы для поддержки различных браузеров.