Заставьте postcss работать с jss материала пользовательского интерфейса

Я столкнулся с этой проблемой, используя материальный пользовательский интерфейс: для создания моего приложения, которое работает в некоторых старых браузерах, css должен иметь префикс, например:

display:flex;

Я хочу, чтобы после упаковки он автоматически добавлял некоторую совместимость:

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

и мой css был создан таким образом:

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

export default withStyles(styles)(APP)

Кто-нибудь знает, как заставить его работать?

javascript material-ui next.js

06.03.2019 06:52

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

698

Ответы 1

Вам нужно настроить свой postcss, создав файл postcss.config.js в корне проекта и определить экспорт

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

Убедитесь, что в вашей конфигурации webpack есть правила для публикаций:

{
  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), [])
      }
    }
  ]
}

Я надеюсь, что это работает для вас.

Я не вижу возможности применить здесь postcss-загрузчик, так как он срабатывает только для файлов css|scss, а файл OPs имеет расширение .js.

— 08.09.2021 14:28

29.04.2019 11:07