8
votes

Le préfixeur automatique ne fonctionne pas dans create-react-app lors de l'utilisation de sass

J'utilise create-react-app et j'utilise des fichiers ".scss" pour styliser l'application, et selon la documentation, l'autoprefixer devrait fonctionner automatiquement ... https://facebook.github.io/create-react -app / docs / post-traitement-css

Voici mon fichier "index.scss" ...

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

Il importe juste un tas d'autres fichiers ".scss".

Et voici le fichier "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();

Et voici la [liste des navigateurs] dans le fichier package.json ...

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

Qu'est-ce que je fais de mal ici? Chaque fois que j'inspecte le CSS, je ne vois aucun préfixe automatique se produire.

reactjs create-react-app sass autoprefixer

0 commentaires

3 Réponses :

13
votes

Le paramètre de votre liste de navigation est vraiment moderne. Cela signifie que la plupart des préfixes css ne sont plus nécessaires. Essayez quelque chose comme

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

et vous devriez commencer à voir le préfixeur automatique entrer en jeu.

Voici la liste des requêtes que vous pouvez faire .

2 commentaires

Parfait !! Merci.. !

J'ai essayé de changer les requêtes, mais rien n'a démarré ... Je pense que les personnes qui réagissent doivent mettre à jour leurs documentations pour éviter toute confusion.

0
votes

Dans mon cas, la réponse acceptée ne fonctionnait que pour exécuter le serveur de développement à l'aide de yarn start .

Autoprefixer n'a pas ajouté les préfixes de grille pour la version de production, malgré le fait d'avoir ie 11 dans la liste du browserslist et le commentaire /* autoprefixer grid: autoplace */ dans les fichiers scss.

J'ai donc dû ajouter la variable d'environnement AUTOPREFIXER_GRID=autoplace lors de l'exécution de la construction d'exécution de yarn run build .

Je pourrais faire fonctionner le préfixe automatique de la grille en utilisant la ligne de commande:

"scripts": {
  "start": "react-scripts start",
  "build": "AUTOPREFIXER_GRID=autoplace react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

mise à jour de package.json :

AUTOPREFIXER_GRID=autoplace yarn run build

create-react-app : 3.4.1 .

1 commentaires

Pour activer l'autoprefixing pour la grille, ajoutez simplement cette ligne / * autoprefixer grid: autoplace * / en haut de votre fichier css / scss voir create-react-app.dev/docs/post-processing-css . Devrait faire le travail :)

0
votes

/*! autoprefixer grid: autoplace */

0 commentaires