React führt antd-mobile+postcss ein, um ein mobiles Terminal zu erstellen

npm installiere antd-mobile --save

importiere „antd-mobile/dist/antd-mobile.css“;

importiere React von „react“;
importiere { Button } von „antd-mobile“;
const index = () => {
    zurückkehren (
        <div>
            <Button type="primary">primär</Button>
        </div>
    );
}

Standardindex exportieren;

npm installiere Babel-Plugin-Import -s

npm installiere react-app-rewired customize-cra -s

 "Skripte": {
    "Start": "React-App-Rewired-Start",
    "Build": "React-App-Rewired-Build",
    "Test": "React-App-Rewired-Test",
    "auswerfen": "react-app-rewired auswerfen"
  },

const { override, fixBabelImports } = erfordern('customize-cra');
modul.exporte = überschreiben(
    fixBabelImports('importieren', {
        Bibliotheksname: "antd-mobile",
        Stil: "css",
    }),
);

npm installiere lib-flexible postcss-px2rem-exclude --save

importiere 'lib-flexible'

const { override, fixBabelImports, addPostcssPlugins, addWebpackAlias} = require('customize-cra');
const path = require("Pfad");
modul.exporte = überschreiben(
    fixBabelImports('importieren', {
        Bibliotheksname: "antd-mobile",
        Stil: "css",
    }),
    addPostcssPlugins(
        [erfordern("postcss-px2rem-ausschließen")
            (
                {
                    remUnit: 75, //Designgröße remPrecision: 2, //Nur auf zwei Dezimalstellen umrechnen exclude: /node_modules/i //Plugins müssen nicht in rem umrechnen
                }
            )
        ]
    ),
    addWebpackAlias({
        "@": Pfad.auflösen(__dirname, "src")
    })
);

npm installiere weniger less-loader -s

npm installiere [email protected] -s

const { override, fixBabelImports, addPostcssPlugins, addWebpackAlias, addLessLoader } = require('customize-cra');
const path = require("Pfad");
modul.exporte = überschreiben(
    fixBabelImports('importieren', {
        Bibliotheksname: "antd-mobile",
        Stil: true, //Standard ist „css“
    }),

    addLessLoader({
        javascriptEnabled: true,
        modifyVars: { "@brand-primary": "#1DA57A" }, //Benutzerdefiniertes Design}),

    addPostcssPlugins(
        [erfordern("postcss-px2rem-ausschließen")
            (
                {
                    remUnit: 75, //Designgröße remPrecision: 2, //Nur auf zwei Dezimalstellen umrechnen exclude: /node_modules/i //Plugins müssen nicht in rem umrechnen
                }
            )
        ]
    ),

    addWebpackAlias({
        "@": Pfad.auflösen(__dirname, "src")
    })
);

npm ich reagiere-app-rewire-postcss postcss-px2rem-exclude -S

Konstante {
  außer Kraft setzen,
  fixBabelImports,
  addWebpackAlias,
  addDecoratorsLegacy,
} = erfordern("anpassen-cra");
const path = require("Pfad");
const rewirePostcss = erforderlich("react-app-rewire-postcss");
modul.exporte = überschreiben(
  //On-Demand-Laden konfigurieren fixBabelImports("import", {
    Bibliotheksname: "antd-mobile",
    Stil: "css",
  }),
  //Konfigurationsdatei aliasaddWebpackAlias({
    "@": Pfad.auflösen(__dirname, "src"),
    "@scss": Pfad.auflösen(__dirname, "src/assets/scss"),
    "@images": Pfad.auflösen(__dirname, "src/assets/images"),
    "@views": Pfad.auflösen(__dirname, "src/views"),
    "@network": Pfad.resolve(__dirname, "src/network"),
    "@store": Pfad.resolve(__dirname, "src/store"),
    "@components": Pfad.resolve(__dirname, "src/components"),
  }),
  addDecoratorsLegacy(),
  (Konfiguration, Umgebung) => {
    // Postcss neu schreiben
    rewirePostcss(Konfiguration, {
      Plugins: () => [
        erfordern("postcss-flexbugs-fixes"),
        erfordern("postcss-preset-env")({
          Autopräfix: {
            Flexbox: "Nr. 2009",
          },
          Stufe: 3,
        }),
        erfordern("postcss-px2rem-exclude")({
          // Entwurfsbreite/10
          remEinheit: 1080 / 10,
          ausschließen: /node-modules/i,
        }),
      ],
    });
    Konfiguration zurückgeben;
  }
);