Enabling postcss compatibility with jss in Material UI

Question

Enabling postcss compatibility with jss in Material UI

I came across an issue while using material UI: I need to add prefixes to CSS for my app to work in older browsers, for example:

display:flex;

What I'm looking for is a way to automatically add compatibility after packaging, like this:

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

This is how my css was structured:

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

export default withStyles(styles)(APP)

Does anyone have suggestions on how to resolve this? Any help would be appreciated.

javascript material-ui next.js

Answer 1

Answer №1

To set up postcss, you should create a postcss.config.js file in the project's root directory and define exports.

module.exports = {
  plugins: [
    require("postcss-easy-import")({ prefix: "_" }), // Ensure this is the first plugin
    require('cssnano')({
      preset: 'default',
    }),
    require("autoprefixer")({
      browsers: [
        '>1%',
        'last 4 versions',
        'Firefox ESR',
        'not ie < 9',
      ]
    })
]};

Don't forget to include rules for postcss in your webpack configuration:

{
  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 this helps you achieve the desired outcome.

Answer 2

To set up postcss, you should create a postcss.config.js file in the project's root directory and define exports.

module.exports = {
  plugins: [
    require("postcss-easy-import")({ prefix: "_" }), // Ensure this is the first plugin
    require('cssnano')({
      preset: 'default',
    }),
    require("autoprefixer")({
      browsers: [
        '>1%',
        'last 4 versions',
        'Firefox ESR',
        'not ie < 9',
      ]
    })
]};

Don't forget to include rules for postcss in your webpack configuration:

{
  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 this helps you achieve the desired outcome.

Enabling postcss compatibility with jss in Material UI

Answer №1

Similar questions

Express.js is unable to redirect to a customized URL scheme

Managing email delivery and responses within Nextjs server functions using Nodemailer and React Email package

Sending data via req.body from middleware

Tips for automatically setting tabulator columns for unknown JSON data

Attempting to send a filled array to res.render, but struggling to implement a suitable async callback mechanism

What is the method to set precise values on a range slider?

Highcharts does not support dynamic data loading with AJAX

Changing the daisyUI theme in Next.js through a button click: A step-by-step guide

Using Jquery, Javascript, or Ajax to deactivate the iframe by clicking on it

Issue with parentNode.replaceChild not functioning properly in Internet Explorer 6

Teaching how to utilize Express to send a blob object as a response

What is the best way to search for multiple terms within a string using JavaScript?

Error 504 occurs on Express.js due to a timeout issue while a timer is active

Leveraging the power of Next.js and a tailored deployment strategy using Express and Node

Delay loading of external JavaScript with data attributes

Utilizing a Material UI custom theme in React with Typescript: A step-by-step guide

When the background image URL is altered, the button size automatically adjusts

Tips for transferring data from a controller to $scope in the MVC architecture with AngularJS

Ways to incorporate conditional logic with URL query parameters in Next.JS

Building custom directives in Angular.js with d3.js