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

Question

[Айнур Ярулин]

Здравствуйте, подскажите пожалуйста как подключить 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>

Но это не сработало, может кто сталкивался с этим?

Answer 1

[Антон Антон]

Ходят слухи (в документации к vite), что нужно в корне проекта сделать файл postcss.config.js (или любой, поддерживаемый https://github.com/postcss/postcss-load-config) и всё взлетит.
пс: lang="postcss" не нужен, но это не точно

Comments

[Айнур Ярулин]

Я создал файл и написал там вот это:

import postcssNesting from 'postcss-nesting'

module.exports = {
  parser: 'sugarss',
  map: false,
  plugins: {
    'postcss-plugin': {
      postcssNesting
    }
  }
}

Но никаких признаков жизни, ошибок нет, но и стили не применяются

[Айнур Ярулин]

Антон Антон, я даун. Всё работает, спасибо.
Я подключил правильно, но как оказалось нужно использовать знак "&"
чтобы стили заработали, вот что я имею ввиду:

.block {
  .block-item {
   // НЕ ПРАВИЛЬНО
  } 
  
  & .block-item {
    // РАБОТАЕТ
  }
}

[Антон Антон]

Айнур Ярулин, работают оба варианта, просто по разному, зависит от разметки ))

Answer 2

[Айнур Ярулин]

Нужно добавить файл postcss.config.js и в нём написать вот это:

import postcssNesting from 'postcss-nesting'

module.exports = {
  parser: 'sugarss',
  map: false,
  plugins: {
    'postcss-plugin': {
      postcssNesting
    }
  }
}