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.

Answer 1

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.