Autoprefixer не работает в приложении create-response-app при использовании sass

Я использую create-response-app, и я использую файлы ".scss" для стилизации приложения, и, согласно документации, autoprefixer должен работать автоматически ... https://facebook.github.io/create-response-app/docs/post-processing-css

Вот мой файл index.scss ...

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

Он просто импортирует кучу других файлов ".scss".

А вот и файл index.js ...

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();

А вот [список браузеров] в файле package.json ...

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

Что я здесь делаю не так? Всякий раз, когда я проверяю CSS, я не вижу никаких автоматических префиксов.


reactjs create-react-app sass autoprefixer
person Ruby    schedule 03.02.2019    source источник

Ответы (3)


arrow_upward
15
arrow_downward

Настройки вашего списка браузеров действительно современные. Это означает, что многие префиксы css больше не нужны. Попробуйте что-нибудь вроде

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

и вы должны начать видеть, как срабатывает автопрефиксатор.

Вот список запросов, которые вы можете сделать.

person Derek Nguyen    schedule 04.02.2019
comment
Идеально !! Спасибо.. ! - person w411 3; 30.08.2019
comment
Я попытался изменить запросы, но ничего не вышло ... Я думаю, что реагирующим лицам нужно обновить свою документацию, чтобы избежать путаницы. - person cyberAnn; 05.12.2020

arrow_upward
1
arrow_downward

В моем случае принятый ответ работал только для запуска сервера разработки с использованием yarn start.

Autoprefixer не добавлял префиксы сетки для производственной сборки, несмотря на наличие ie 11 в browserslist и комментария /* autoprefixer grid: autoplace */ в файлах scss.

Поэтому мне пришлось добавить переменную окружения AUTOPREFIXER_GRID=autoplace при запуске yarn run build.

Я мог бы заставить автопрефиксную сетку работать либо с помощью командной строки:

AUTOPREFIXER_GRID=autoplace yarn run build

OR

обновление 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 версия: 3.4.1.

person Antony    schedule 29.04.2020
comment
Чтобы включить автопрефиксирование для сетки, просто добавьте эту строку / * autoprefixer grid: autoplace * / в начало вашего файла css / scss, см. create-react-app.dev/docs/post-processing-css. Должен сработать :) - person o-faro; 27.08.2020
comment
Спасибо! У меня была точно такая же проблема .. У меня /* autoprefixer grid: autoplace */, и все работает нормально на dev, но не работает в сборке prod .. эта переменная env исправила :) - person GSerjo; 26.01.2021

arrow_upward
0
arrow_downward 

/* autoprefixer grid: autoplace */

Не работал для производственной сборки в приложении create-response-app, поскольку он удаляется в сжатом режиме < / а>.

Решение:

/*! autoprefixer grid: autoplace */
person Mordechai    schedule 17.11.2020