Autoprefixer doesn't work in create-react-app while using sass

Question

I'm using create-react-app and I'm using ".scss" files to style the app, and according to the documentation, autoprefixer should work automatically ... https://facebook.github.io/create-react-app/docs/post-processing-css

Here's my "index.scss" file ...

/* autoprefixer grid: on */
@import "./app/css/reset";
@import "./app/css/variables";
@import "./app/css/mixins";
@import "./app/css/global";
@import "./app/css/form";

It just imports a bunch of other ".scss" files.

And here's the "index.js" file ...

import React from "react";
import ReactDOM from "react-dom";
import * as serviceWorker from "./serviceWorker";
import { BrowserRouter as Router } from "react-router-dom";
import { Provider } from "react-redux";
import "./index.scss";
import App from "./App";
import { configureStore } from "./app/store/configureStore";


const store = configureStore();

ReactDOM.render(
    <Provider store={store}>
        <Router>
            <App />
        </Router>
    </Provider>,
    document.getElementById("root")
);

serviceWorker.unregister();

And here's the [browserslist] in package.json file ...

"browserslist": [
    "last 1 version",
    "> 1%",
    "maintained node versions",
    "not dead"
]

What am I doing wrong here? Whenever I inspect the CSS I can't see any autoprefixing happening.

score 21 · Accepted Answer · answered Feb 04 '19 at 06:06

21

Your browserlist setting is really modern. This means many of the css prefixes are no longer necessary. Try something like

"browserslist": [
    "since 2010" // support all browsers & versions released since 2010
]

and you should start to see autoprefixer kicking in.

Here's the list of queries you can make.

answered Feb 04 '19 at 06:06

Derek Nguyen

11,294
1
40
64

1

Perfect !! Thanks.. ! – w411 3 Aug 30 '19 at 06:45
i tried changing the queries, but nothing kicked in.... I think react peeps need to update their documentations to prevent confusion. – cyberAnn Dec 05 '20 at 17:58

score 0 · Answer 2 · answered Apr 29 '20 at 18:25

In my case, the accepted answer worked only for running the development server using yarn start.

Autoprefixer did not add the grid prefixes for the production build, despite having ie 11 in the browserslist and the comment /* autoprefixer grid: autoplace */ in the scss files.

So I had to add the environment variable AUTOPREFIXER_GRID=autoplace when running yarn run build.

I could get the grid autoprefixing to work either using command line:

AUTOPREFIXER_GRID=autoplace yarn run build

OR

updating package.json:

"scripts": {
  "start": "react-scripts start",
  "build": "AUTOPREFIXER_GRID=autoplace react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

create-react-app version: 3.4.1.

To enable autoprefixing for grid just add this line /* autoprefixer grid: autoplace */ to the top of your css/scss file see https://create-react-app.dev/docs/post-processing-css/. Should do the job :) — o-faro, Aug 27 '20 at 13:06
Thank you! I had exactly the same issue.. I've `/* autoprefixer grid: autoplace */` and all works fine on dev but doesn't work in prod build.. this env variable did the fix :) — GSerjo, Jan 26 '21 at 16:04

score 0 · Answer 3 · answered Nov 17 '20 at 20:25

0

/* autoprefixer grid: autoplace */

Did not work for the production build in create-react-app, since it gets removed in compressed mode.

Solution:

/*! autoprefixer grid: autoplace */

answered Nov 17 '20 at 20:25

Mordechai

15,437
2
41
82

Autoprefixer doesn't work in create-react-app while using sass

3 Answers3