How to use autoprefixer with ViteJS and React?

Question

I'm using React with ViteJS and SASS, but i have a problem. It seems there is not autoprefixer for CSS/SCSS when i will build the project.

How to add an auto-prefixer with ViteJS and SASS?

score 13 · Accepted Answer · edited Nov 10 '22 at 13:50

13

Add postcss and autoprefixer: yarn add -D postcss@latest autoprefixer@latest

then add a file postcss.config.js on your root project directory:

module.exports = {
  plugins: {
    autoprefixer: {}
  }
}

ℹ️ You can find bellow an example of vite.config.ts for a new project without a postcss config file.

import { defineConfig } from "vite"
import react from '@vitejs/plugin-react'
import autoprefixer from 'autoprefixer'

export default defineConfig({
  plugins: [
    react()
  ],
  css: {
    postcss: {
      plugins: [
        autoprefixer({}) // add options if needed
      ],
    }
  }
})

And if it still doesn't work please provide a reproducible project.

edited Nov 10 '22 at 13:50

FrankenCode

307
1
5
12

answered Mar 10 '22 at 10:06

flydev

4,327
2
31
36

I created the react project using `npm create vite` but the solution is not working. – Thanooshan Sep 08 '22 at 10:18
1

Still it's not working. I've created a new question. https://stackoverflow.com/questions/73647725/how-to-add-autoprefixer-with-vite-react-project would be great if you can have a look.. – Thanooshan Sep 08 '22 at 16:35
1

Hey! I think this is not a solution, Vite is an alternative to create-react-app so there should be a way to use autoprefixer with it instead of changing the project generator. – SKOLZ Sep 13 '22 at 14:10
1

the question explicitly says they want to use autoprefixer with Vite and React. So suggesting changing the project generator to CRA is the same as explaining how to add autoprefixer to Vue CLI and telling them to use Vue instead. – SKOLZ Sep 13 '22 at 18:48
1

This answer is confusing, the question is specifically about Vite except you keep pointing to create react app. "If it doesn't work, you should check which version of create-react-app you are using". OP isn't using CRA, OP is using vite – Jasper Oct 13 '22 at 09:10

score 3 · Answer 2 · answered Sep 13 '22 at 14:30

First, you have to install autoprefixer:

npm i autoprefixer -D

after that, you have to go to your vite.config.ts and add it there:

import autoprefixer from 'autoprefixer';

export default defineConfig({
  plugins: [react()],
  css: {
    ...
    postcss: {
      plugins: [
          autoprefixer
      ],
    }
  },
  ...
});

score 0 · Answer 3 · answered Oct 14 '22 at 11:37

Install postcss and autoprefixer with:
npm i autoprefixer -D
npm i postcss -D
then config vite:

import { defineConfig } from "vite";
import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
import react from '@vitejs/plugin-react'
import autoprefixer from "autoprefixer";

export default defineConfig({
  plugins: [react(), cssInjectedByJsPlugin()],
  css: {
    postcss: {
      plugins: [autoprefixer],
    },
  },
  build: {
    rollupOptions: {
      output: {
        manualChunks: undefined,
      },
    },
  },
});

How to use autoprefixer with ViteJS and React?

3 Answers3