squadbrodyaga
@squadbrodyaga
帆は風を変えた

Как подключить PostCSS к Vite.js?

Здравствуйте, подскажите пожалуйста как подключить PostCSS к Vite JS, в документации
всё не очень понятно.

Я создал пустой проект и вот что я сделал дальше:

1. Я установил плагин postcss-nesting и импортировал его в файл vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import postcssNesting from 'postcss-nesting';

export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      plugins: [
        postcssNesting
      ]
    }
  }
})


2. В файле App.vue в теге style задал язык postcss
<style scoped lang="postcss">
...
</style>


Но это не сработало, может кто сталкивался с этим?
  • Вопрос задан
  • 187 просмотров
Решения вопроса 2
Fragster
@Fragster
помогло? отметь решением!
Ходят слухи (в документации к vite), что нужно в корне проекта сделать файл postcss.config.js (или любой, поддерживаемый https://github.com/postcss/postcss-load-config) и всё взлетит.
пс: lang="postcss" не нужен, но это не точно
Ответ написан
squadbrodyaga
@squadbrodyaga Автор вопроса
帆は風を変えた
Нужно добавить файл postcss.config.js и в нём написать вот это:
import postcssNesting from 'postcss-nesting'

module.exports = {
  parser: 'sugarss',
  map: false,
  plugins: {
    'postcss-plugin': {
      postcssNesting
    }
  }
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы