Search code examples
cssvitepostcss

configuring a postcss with vite

I usually keep all my processing and build config files in the build folder for a good practice measure.

postcss.cofig.json works if it's on the root of the folder, is there a way to configure the location of it with vite if it's moved to the build folder?

Here's my folder structure

bin/
build/
   vite.config.js
   postcss.config.json
   ... others
src/
test/

package.json

"scripts": {
  "dev": "vite --c build/vite.config.js",
  "build": "vite build --c build/vite.config.js",
  "preview": "vite preview --c build/vite.config.js",

build/postcss.config.js

{
  "map": true,
  "plugins": {
    "autoprefixer": {}
  }
}

Attempt: build/vite.config.js

export default {
    root: "src",
    css: {
        postcss: {
            config: "./postcss.config.json"
        }
    },
    build: {
        outDir: "../bin",
        emptyOutDir: true,
    }
}
Solution

  • The search is done using postcss-load-config and only the supported config file names are loaded.

    The words above intended that you cannot customize the location of the PostCSS configuration. Head on the link following to get more details https://vitejs.dev/config/shared-options.html#css-postcss