I met this problem using material UI: To build my app which runs in some old browsers, css needs to be prefixed, e.g:


What I want is after packing it should add some compatibility automatically:

display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;

and my css was created this way:

import { withStyles } from '@material-ui/core';
const styles={

export default withStyles(styles)(APP)

Anyone knows how to make it work?

1 Answers

Ikram - Ud - Daula On

You need to configure your postcss by creating a postcss.config.js file at the project root and define exports

module.exports = {
  plugins: [
    require("postcss-easy-import")({ prefix: "_" }), // keep this first
      preset: 'default',
      browsers: [
        'last 4 versions',
        'Firefox ESR',
        'not ie < 9',

Make sure your webpack configuration has a rules for postss:

  test: /\.css$/,
  use: ["babel-loader", "raw-loader", "postcss-loader"]
  test: /\.s(a|c)ss$/,
  use: [
    "babel-loader", "raw-loader", "postcss-loader",
      loader: "sass-loader",
      options: {
        includePaths: ["your/src/scss/style/file/location", "node_modules"]
          .map(d => require('path').join(__dirname, d))
          .map(g => require('glob').sync(g))
          .reduce((a, c) => a.concat(c), [])

I hope it's works for you.