Jak si přizpůsobit design mravence pomocí React & Webpack… The Missing Guide

Ant Design má úžasnou sadu reakčních komponent. Pokud toto čtete, nemusím vysvětlovat proč a jak je používat, ale jak je přizpůsobit.

Oficiální dokumenty vám poskytují pouze vodítka pro přizpůsobení, ale ne úplného průvodce jak na to. Záměrem tohoto zápisu je provést úvodní nastavení pro přizpůsobení výchozího tématu anti-d.

TL; DR nebo „jen mi dovolte vidět kód“ najdete zde.

* čtenáři - v případě jakýchkoli chyb nebo odeslání žádostí o vyžádání komentář. Záměrem je udržovat tento zápis aktuální a co nejpřesnější (m̶a̶y̶b̶e̶ ̶e̶v̶e̶n̶ ̶m̶e̶r̶g̶e̶d̶ ̶i̶n̶t̶o̶ ̶t̶h̶e̶ ̶d̶o̶c̶s̶ - aktualizováno 2017–06–25, doplněno do dokumentů).

* Aktualizace 2017–11–03 - omlouvám se, že nedokážu odpovědět na všechny otázky, které přicházejí. Vzhledem k nesčetným způsobům, jak nakonfigurovat reakci aplikace, je obtížné poskytnout podporu v sekci komentářů. Zkuste prosím spustit demo repo, které jsem dal dohromady, a odeslat tam žádosti o vyžádání nebo chyby souborů. Dík!

Krok jedna - instalace balíčků:

  • Nainstalujte design mravence:

npm install antd - save

  • Nainstalujte Antův (špatně pojmenovaný) modulární zavaděč pluginů:

To nám umožní svazovat pouze součásti mravenců, které používáme.

npm install babel-plugin-import --save-dev

  • Nainstalujte balíček less-vars-to-js:

Vezme obsah menšího souboru jako řetězec a vrátí objekt obsahující všechny proměnné, které našel.

npm nainstalovat méně-vars-to-js --save-dev

  • Nainstalujte méně a zavaděče CSS / méně webpacku, pokud jste tak již neučinili:

npm instalovat méně zavaděč css-loader style-loader - save-dev

Krok 2 - Konfigurace nakladače Babel:

Přidejte babel-plugin-import do babel zavaděče webpacku nebo použijte soubor .babelrc.

//.babelrc
{
  "předvolby: [...]
  "pluginy": [
    ["import", {"libraryName": "antd", "style": true}],
    ...
  ]
}
// webpack2.config.js
modul: {
  pravidla: [
    {
      loader: 'babel-loader',
      vyloučit: / node_modules /,
      test: /\.js$/,
      možnosti: {
        předvolby: [...]
        pluginy: [
          ['import', {libraryName: "antd", style: true}]
        ]
      },
    },
    ...
  ]
}
// webpack1.config.js
modul: {
  nakladače: [
    {
      test: /\.jsx?$/,
      vyloučit: / node_modules /,
      nakladač: 'babel',
      dotaz: {
        pluginy: [
          ['import', {libraryName: "antd", style: true}]
        ]
      }
    },
  ...
  ]
}

Krok tři - Vytvořte soubor .less pro přepsání proměnné mravního tématu:

// ant-default-vars.less
// Dostupné proměnné motivu najdete v
// https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less

@ primární barva: # 193D71; <- přepsání našeho prvního mravence!

Krok čtyři - Konfigurujte méně zavaděč webového balíčku:

// webpack * .config.js
const cesta = vyžadovat ('cesta');
const fs = vyžadovat ('fs');

const lessToJs = vyžadovat ('less-vars-to-js');
const themeVariables = lessToJs (fs.readFileSync (path.join (__ dirname, './ant-theme-vars.less'), 'utf8'));
...
// webpack2.config.js
modul: {
  pravidla: [
    ...
    {
      test: /\.less$/,
      použití: [
        {loader: "style-loader"},
        {loader: "css-loader"},
        {loader: "less-loader",
          možnosti: {
            editVars: themeVariables
          }
        }
      ]
    }
  ]
}
//webpack1.config.js
modul: {
  nakladače: [
    {
      test: /\.less$/,
      loader: 'style-loader! css-loader! less-loader',
      dotaz: {
        editVars: themeVariables
      }
    },
  ...
  ]
}

Krok 5 (volitelné) - konfigurace písem:

Písma / ikony jsou standardně zobrazovány z CD Alibaba. Můžete si je stáhnout a obsluhovat z vašeho projektu nebo je přidat do svého vlastního CDN (doporučeno). Níže je uvedeno, jak nakonfigurovat adresu URL, ze které jsou poskytovány.

// webpack * .config.js
const cesta = vyžadovat ('cesta');
const fs = vyžadovat ('fs');

const lessToJs = vyžadovat ('less-vars-to-js');
const themeVariables = lessToJs (fs.readFileSync (path.join (__ dirname, './ant-theme-vars.less'), 'utf8'));
// lessToJs nepodporuje @ icon-url: "some-string", takže je ručně přidáváme do vytvořeného objektu themeVariables js zde
themeVariables ["@ icon-url"] = "'// localhost: 8080 / fonts / iconfont'";

A je to!

Doufejme, že to pomůže těm, kteří byli zaseknutí nebo zmatení při pokusu o přizpůsobení ant-d knihovny.

Upozornění

  • Můžete přepsat pouze to, co je v souboru default.less mravence.
  • Pokud potřebujete upravit téma mimo výchozího mravence.Je-li třeba najít třídu a ručně je přepsat ve svých projektech css :(
  • Přepisování motivů se provádí v době kompilace, takže během běhu nedochází k přepínání motivů (vestavěných).