ãã®çŽ æŽãããã©ã€ãã©ãªãããããšãïŒ
babel-plugin-import
ã䜿çšããŠã¢ãžã¥ã©ãŒCSSã€ã³ããŒããå®è¡ããããšããŸããããåã
ã®ã³ã³ããŒãã³ãã®cssãšãšãã«ãæ¢åã®ã¹ã¿ã€ã«ã«å¹²æžããå€ãã®ã°ããŒãã«cssãã€ã³ããŒããããŠããŸãã ã°ããŒãã«CSSãå«ããã«åã
ã®ã³ã³ããŒãã³ãã®CSSãã€ã³ããŒãããããšã¯å¯èœã§ããïŒ
ããããšãïŒ
ãã®ãããªCSSã«ãŒã«ãæå³ããŸããïŒ
html,
body {
...
}
ã¯ãã
çŸåšããããã®CSSã«ãŒã«ãã€ã³ããŒãããªãããšã¯äžå¯èœã§ãã
https://github.com/ant-design/ant-design/issues/1966#issuecomment -247946641
ãããã®ã°ããŒãã«ã¹ã¿ã€ã«ãä»ãããªãŒããŒã©ã€ãããå¿ èŠããããŸãã
ãŸãã¯ã$ïŒ babel-plugin-import
ã®style
ãªãã·ã§ã³ãåé€ããããå°ãªããã¡ã€ã«ãåå¥ã«ã€ã³ããŒãããŸãã
<strong i="12">@import</strong> "~antd/lib/style/themes/default.less";
<strong i="13">@import</strong> "~antd/lib/button/style/index.less";
ããããããã¯ã²ã©ããã¶ã€ã³ã§ãã
ãã®åé¡ã«ããããã®ã©ã€ãã©ãªã®æäœãéåžžã«å°é£ã«ãªããŸãã ç¹ã«ããã£ãªã©ã«ã°ããŒãã«ãªããããã£ãæã£ãŠããããããå€æŽããèšç»ããªãéãããã®åé¡ã¯ãã£ãšæ確ã«ãããã¹ãã ãšæãã
@Forestdev @peitalinããã¯æ¢ç¥ã®åé¡ã§ããããã®åé¡ã解決ããã®ã«ååãªæéããããŸããã
ããããããã§è°è«ãç¶ããããšãã§ããŸãã
é倧ãªå€æŽãã€ã³ããŒãã§ããã°ããã®åé¡ã解決ã§ããŸãã ããšãã°ããªã»ããæã«ã¹ã¿ã€ã«ãã³ã³ããŒãã³ãã®ã¹ã¿ã€ã«ã«ç§»åããŸãã
åãïŒ
* {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // remove tap highlight color for mobile safari
}
ã«ïŒ
.ant-btn,
.ant-btn * {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // remove tap highlight color for mobile safari
}
ãŸããäžäœäºææ§ã®ããã«ãã¹ã¿ã³ãã¢ãã³ã®ãªã»ããã¹ã¿ã€ã«ã·ãŒããæäŸã§ããŸãã
import 'antd/styles/reset.less'
ããã«é¢ããæŽæ°ã¯ãããŸããïŒ
話ãåãããšã¯ã§ããŸãããä»ã¯è§£æ±ºçãé©çšããæéããããŸããïŒèŠã€ãã£ãå ŽåïŒã
ã°ããŒãã«ãªCSSãã€ã³ããŒãããŠæ¢åã®ã¹ã¿ã€ã«ãäžæžãããäœè£ã®ãã人ã¯å€ããªããããããã¯é倧ãªåé¡ã ãšæããŸãã
ããã¯ç§ãAntdãæ¡çšããã®ãæ¢ããæ¬åœã«è¿·æã§ã
ããã¯å€ãã®éçºè ããããã¯ããŸãïŒ
antã¯bootstarpãšäºææ§ããªããããantã®äœ¿çšããããããªããã°ãªããŸããã§ããã
ããå°ãªããã¡ã€ã«ãç¬ç«ããã©ã€ãã©ãªã«å ¥ããã®ã¯ã©ãã§ããã
ãšããã§ã ãã£ãŠããŸã
é¢é£ãããã£ã¹ã«ãã·ã§ã³ïŒ https ïŒ//github.com/palantir/blueprint/issues/244
ããã¿ããªãç§ã¯[email protected]ã«åãçµãã§ããŠãã°ããŒãã«ã¹ã¿ã€ã«ã®åé¡ã®è§£æ±ºçãèŠã€ããããšããŠããŸãã
@benjycuiããimport 'antd/styles/reset.less'
ã®è§£æ±ºçãè©ŠããŸããã ç¹ã«babel-plugin-importã䜿çšãããšãäžæçãªå€æŽã«ãªããã¹ã¿ã€ã«ã®ã€ã³ããŒããã¯ããã«è€éã«ãªãããšãããããŸãã ã ããç§ã¯ãããæž¡ãããšã«ããŸããã
次ã«ããã®åé¡ã®äž»ãªãã€ã³ãã¯ãã³ãŒãã次ã®ããã«å€æããçŽbabel-plugin-import
ã§ããããšãããããŸãã
import Button from 'antd/lib/button';
import 'antd/lib/button/style/css'; // It will import reset styles and hard to override it because it was imported lately!!!
ãã®ããã®ããè¯ãåé¿çã¯ã babel-plugin-import
ã®style
ãªãã·ã§ã³ã䜿çšãããã¹ã¿ã€ã«ãæåã§ã€ã³ããŒãããããšã§ãã
<strong i="17">@import</strong> '~antd/dist/antd.css';
// your global styles
body {
...
}
ã ããç§ã¯reset.less
ã®ã¢ã€ãã¢å
šäœããããããŠã httpsïŒ//github.com/ant-design/ant-design/blob/afce275d25abe958b32cf15ba1f16c49f4fca900/components/style/core/baseã®ãããªè¿·æãªãªã»ããã³ãŒããåé€ããŸãã lessïŒL33 -L50
ãŸããïŒ6162ã解決ããããã«ã bootstrap @ v4ããããè¯ãã¿ã€ãã°ã©ãã£ã³ãŒããè¿œå ããŸãã
ãã¹ãŠã®ã¢ããããŒãã¯çŸåšïŒ7682ã«ããããŸããªãantd-3.0ã«ããŒãžãããŸãã
import 'antd/styles/reset.less
ãimport 'antd/styles/typography.less
ã«å€æŽããã ãã§ãã
ãŠãŒã¶ãŒã[email protected]ããã¢ããã°ã¬ãŒãããå Žåã import 'antd/styles/typography.less
ã¯ç§»è¡ã容æã«ããããã®ã¢ããã¿ãŒã§ãã
antdãåããŠäœ¿çšãããŠãŒã¶ãŒã®å Žåã import 'antd/styles/typography.less
ã¯ãªãã·ã§ã³æ©èœã§ããããã競åã«ã€ããŠå¿é
ããå¿
èŠã¯ãããŸããã
antd/style/v2-compatible-reset.less
è¿œå ããŸããã
+// For 2.x reset compatibility
+// import 'antd/style/v2-compatible-reset';
+// or
+// <strong i="7">@import</strong> '~antd/style/v2-compatible-reset.css';
ãã®åé¡ã¯çŸåšã¯ããŒãºãããŠããããã誰ãããã®åé¡ãä¿®æ£ããããã®ããã€ãã®æé ã説æã§ããŸããã Chromeæ¡åŒµæ©èœã®ã³ã³ãã³ãã¹ã¯ãªããã§antdã䜿çšããããšããŠããŸããããã¹ãŠã®WebããŒãžãæ··ä¹±ããŠããŸãã
@abhinavzspaceã§ã¯ã antd@next
ãã€ã³ã¹ããŒã«ããŠ3.0 Alphaãã«ããååŸã§ããŸããããã«ããããã®åé¡ã¯ããçšåºŠè§£æ±ºãããŸãããå®å
šã«ã¯è§£æ±ºãããŸããã
é·ãæéã®åŸãç§ã¯ç§ã®ããã«åãããã€ãã®è§£æ±ºçãèŠã€ããŸããã å€åããã¯ä»ã®äººã®ããã«åã...
åé¡ã¯ãåã³ã³ããŒãã³ããäžé£ã®ã°ããŒãã«ãªã»ãããšãªãŒããŒã©ã€ãïŒnormalize.cssãå«ãïŒãstyle/core/base.less
ããã€ã³ããŒãããããšã§ãããã®ã¹ã¿ã€ã«ãéåæã§èªã¿èŸŒãŸãããšããã¹ãŠãå°ç¡ãã«ããããŒãžã¹ã¿ã€ã«ããªãŒããŒã©ã€ããããŸãã
è¿œå ããããšãããããŸãã
import 'antd/lib/style/index.css'
// import 'antd/lib/style' if you are using LESS
ãããžã§ã¯ãã®ãšã³ããªãã€ã³ãã«ç§»åãããšãwebpackã¯ä»ã®ãã¹ãŠã®ã¹ã¿ã€ã«ãããå ã«ãªã»ãããããã¯ãããããéåæã³ã³ããŒãã³ããèªã¿èŸŒãŸãããšãã«ããªã»ãããå床ã€ã³ããŒã/ã€ã³ã¯ã«ãŒããããããšã¯ãããŸããã
ã³ã³ããŒãã³ãããšã«å¥ã®index.lessãäžããå¿
èŠããããŸããã index.lessãå¶åŸ¡ã§ããŸãã ãŸããã»ãšãã©ãã¹ãŠã®ãã¡ã€ã«ã@import
ãã£ã¬ã¯ãã£ããåé€ãããã @ import ïŒåç
§ïŒã䜿çšããŸã
ããã¯è¯ã解決çã«ãªãã§ããããïŒ
tsk tsktskã ãã®åé¡ã¯ããªãŒãã³ãã§ããå¿ èŠããããŸããããã«ããããããæ¢ç¥ã®åé¡ã§ããããšã誰ããç¥ãããšãã§ããŸãã ãã®ããã ãã«ããããžã§ã¯ãã®éäžã§antdãæšãŠãŸããã
ããã¯æ¬åœã«æ®å¿µã§ãã Antãç§ã«å§ããããããã¯ææã«èŠããŸããããã®åäœã¯æ¢åã®èšèšãå°ç¡ãã«ããAntãBootstrapã®ããã«æããããŸãã ðŠ
Antã¯ããŠãŒã¶ãŒã®ãµã€ãã®å€èŠ³ã§ã¯ãªããç¬èªã®ã³ã³ããŒãã³ãã®å€èŠ³ã«ã€ããŠæèŠãè¿°ã¹ãå¿ èŠããããŸãã
ãã®åé¡ã¯ãAnt3ããã®åé¡ãä¿®æ£ããããšãæå³ããŸãã ããããç§ã¯ãŸã ããããã®ã°ããŒãã«ãªã¹ã¿ã€ã«ãèŠãŠããŸãã ãããã®ã°ããŒãã«ã¹ã¿ã€ã«ãè¿œå ããªãããã«ããã«ã¯ããŠãŒã¶ãŒã¯äœããã¹ãã§ããïŒ
@openjckããã§ã°ããŒãã«ã¹ã¿ã€ã«ããªã»ãããããããã§ãïŒReactãšã³ããªãã€ã³ãã«è¿œå ããŸããïŒïŒ
import 'antd/lib/style/v2-compatible-reset';
ããã圌ãã®ãã§ã³ãžãã°ã«åãããŠããã®ãèŠã€ãã
ãã®ã¡ã¢ãèŠã€ããŸããããããŸããããŸããã§ããã ããã¥ã¡ã³ãã¯ããªããŸã°ãã§ãã ä»ã«ã©ã®ãããªã¹ã¿ã€ã«é¢é£ã®ã€ã³ããŒããè¡ããŸãããïŒãŸãããã®é åºã¯ïŒ
Antã¹ã¿ã€ã«ã«é¢ããŠã¯ãããã ãã§ãã ç§ãstyle: true
èšå®ã䜿çšããŠããŸãããããã¯åé¡ã«ãªãå¯èœæ§ããããŸãã
ã©ã®ãããªã°ããŒãã«ã¹ã¿ã€ã«ã®å€åãèŠãããŸããïŒ
ç§ã¯Reactãwebpackerãšrailsã§äœ¿çšããŠããŸããã以åã¯åãåé¡ããããŸããã ããã解決ããããã«ãHTMLãã¥ãŒã§ãæ¢åã®CSSãã¡ã€ã«åã®ã¹ã¿ã€ã«ã·ãŒããªã³ã¯ã¿ã°ãstylesheet_pack_tagã®äžã«è¿œå ããŸããããã§æ©èœããŸãã
= javascript_pack_tag 'root'
= stylesheet_pack_tag 'root'
= stylesheet_link_tag 'application'
@ jhdavids8 ã style: true
ãã©ãã«èšå®ããŸããïŒ ãããç§ã®èšå®ã«åœãŠã¯ãŸããã©ããã¯ããããŸããã
create-react-appã䜿çšããŠããŸãã ããã¥ã¡ã³ãã§ã¯ããããã¡ã€ã³ã®ã¹ã¿ã€ã«ã·ãŒãã®1ã€ã«è¿œå ããããšãæšå¥šããŠããŸãã
<strong i="10">@import</strong> '~antd/dist/antd.css';
...ãã ãããããããšãæ¬æã«èšå®ãããŠãããã©ã³ããã¡ããªãè¡ã®é«ããªã©ãã°ããŒãã«ãªã¹ã¿ã€ã«ã®å€æŽãå°å ¥ãããŸãã
ããã«èšèŒãããŠããããã«ããªã³ããã³ãã§ã¹ã¿ã€ã«ãã€ã³ããŒãããããã«babel-plugin-import
ã䜿çšããŠããŸãã style: true
ãªãã·ã§ã³ã¯ãSassãœãŒã¹ãã¡ã€ã«ãã€ã³ããŒãããæ¹æ³ã§ãïŒãããåç
§ïŒãããã¯ãAntããŒãã倧å¹
ã«ã«ã¹ã¿ãã€ãºããããã«å¿
èŠã§ãã
ç§ãã¡ã®ããŒã ã¯ãã°ããŒãã«ãªã¹ã¿ã€ã«ã®ããã«antdãæŸæ£ããŸããðã ããªããå¿ããããšã¯ç¥ã£ãŠããŸãããããã解決ããæ¹æ³ãèŠã€ããããšãã§ããã°ãantdã®ãªãŒããå€§å¹ ã«æ¡å€§ããŸãã
ãã®å·ãå床éããŠãã ããã ç§ã¯ãŸã ãã®æ¯ãèããèŠãŠããŸãããããŠä»ã®äººãããã§ãã
+1
+1
èªåã§è¿œå ããã°ããŒãã«cssã¯ãæ¯å/lib/style/index.cssã®éäžã«ããã±ãŒãžåãããŸããantdãåé€ãããã ãã§ãã
IE10ã§æ£ãã衚瀺ãè¿œå ããŸãã
æ»ã
htmlã
äœ {
å¹
ïŒ100ïŒ
;
é«ãïŒ100ïŒ
;
}
ãªããããªã«é£ããã®ã§ãã...ã«ã¹ã¿ã ã°ããŒãã«cssã/lib/style/index.cssã®æåŸã«é
眮ã§ããªãã®ã¯ãªãã§ãã
+1
+1
@ afc163ã§èª¬æãããŠããæ¹æ³ã§åé¡ã解決ã§ããããšãããããŸããã
éåžžã import 'antd/lib/tabs/style/css';
ãå®è¡ããŸããããã¯ãããã ããå«ãŸãããã¡ã€ã«ãæããŸãã
'use strict';
require('../../style/index.css');
require('./index.css');
Tabs CSSãã€ã³ããŒããããã£ãã®ã§ããããã³ã³ããŒãã³ããã¡ã€ã«ã«è¿œå ããŸããã
import 'antd/lib/tabs/style/index.css';
ãŸããããŒãžã®æ®ãã®éšåã«åœ±é¿ãäžããããšãªããã¿ãã³ã³ããŒãã³ãã®ã¹ã¿ã€ã«ãé©åã«èšå®ããŠããããã«èŠããŸããã
ãã ããæåã®ã¹ã¿ã€ã«ã«ã¯çç±ãããã®ã§æ³šæããŠãã ããããããããäžéšã®antdã³ã³ããŒãã³ãã¯ä»ã®ã³ã³ããŒãã³ããããããã«äŸåããŠããããã¹ãŠã®å Žåã«æ©èœãããšã¯éããŸããã
_ãŸã è¡ã£ãŠããªãå Žåã¯ã.babelrcãã©ã°ã€ã³ããstyle
ããããã£ãåé€ããŠãã ããã
[ "import", { "libraryName": "antd" } ]
_
ããã誰ããå©ããããšãé¡ã£ãŠããŸãïŒ
ããã¯çµ¶å¯Ÿã«ã¯ã¬ã€ãžãŒã§ã....ã°ããŒãã«ã¹ã¿ã€ã«ã«å¹²æžãããã¢ãžã¥ã©ãŒãã³ã³ããŒãã³ãã©ã€ãã©ãªã ãã®ã©ã€ãã©ãªããªãããã»ã©é«ãè©äŸ¡ãããŠããã®ããç§ã«ã¯ããããŸããã åé¡ã解決ãããã®ããã«ã圌ãããã®ãã±ãããéããããšã¯èšããŸã§ããããŸããã
@strongui babel-plugin-importãæ©èœããŸãããïŒ
@abenhamdineããããããã§ã¯ãããŸããã ãããŠãäžèšã®ã³ã¡ã³ãã§å€æããã®ã¯ç§ã ãã§ã¯ãããŸããã
ææ°ããŒãžã§ã³ã®ã©ã€ãã©ãªã䜿çšããŠããŸããããŸã ãã®åé¡ãçºçããŠããŸãã
誰ããä¿®æ£ãèŠã€ããŸãããïŒçæ³çã«ã¯ãªã»ããã§ã¯ãããŸããïŒïŒ
å¿ èŠãªå°ããªã³ã³ããŒãã³ãã®æ£ç¢ºãªCSSãã€ã³ããŒãããããšã«æåããŸãã
import 'antd/lib/checkbox/style/index.css'
ãããä»ãç§ã¯ããŒãã«ãå®è£
ããããšããŠããŸãã ããŒãã«ã¯å€ãã®ã¹ã¿ã€ã«ã«äŸåããŠãããããããŸããŸãªCSSã·ãŒãããã¹ãŠåå¥ã«ã€ã³ããŒãããå¿
èŠããããŸãããããã¯åé¡ãããŸããã _äŸå€_ã䞊ã¹æ¿ãæ©èœã«ã¯icon
CSSãå¿
èŠã§ãããããã¯antd/lib/icon
å
ã«ã¯ååšããŸããã 代ããã«ãã¢ã€ã³ã³cssãã¡ã€ã³ã®ã¹ã¿ã€ã«ã·ãŒãã«ãªãã€ã¬ã¯ãããããããã¡ã€ã³ã®ã¹ã¿ã€ã«ã·ãŒããã€ã³ããŒãããå¿
èŠããããŸããã
import 'antd/lib/style/index.css'
ããã¯ç§ã®ã¢ããªã®æ®ãã®éšåã«åœ±é¿ãäžãããã¡ã€ã«ã§ãâïž
å°ãªããšããCSSã·ãŒããã¡ã€ã³ã·ãŒãã«ãªãã€ã¬ã¯ããããªãããã«ããããšã¯ã§ããŸããïŒ ïŒããŒãã«ã®äžŠã¹æ¿ãã«å¿
èŠãªicon
ã®ããã«ïŒïŒ
ãŸãã @ afc163ã¯ãã®åé¡ãå床éããŠãã ããã解決ãããŠããŸããã
ã¹ã¬ãããèªãã§ããWON'TFIXãã¿ã°ã確èªããŠãã ããã ããã¯P0ã®ãã°ã§ãããAnt.Dãã³ã³ããŒãã³ãã©ã€ãã©ãªãšããŠéžæãããã¹ãŠã®å€§èŠæš¡ãªã¢ããªã±ãŒã·ã§ã³ãåã蟌ã¿ã³ã³ããŒãã³ãããããã¯ããŸãã ã¿ã°ã¯ãããŒããã¬ã€ãã³ã°ãã§ããå¿ èŠããããŸãã
@ afc163ãªãäžçã§ããã¯ä¿®æ£ãããªããšããŒã¯ãããŠããã®ã§ããïŒ åå¿å²åŠãšã¢ãžã¥ã©ãŒèšèšã®äžæ žã¯ãã³ã³ããŒãã³ããä»ã®ã³ã³ããŒãã³ãã«ããªãŒãããªãããã«ããããšã§ãã ããã¯ãŸã£ããæå³ããããŸããã ç§ã¯ãã°ããæéããããŠããªãŒéžæçšã®cssãæœåºããä»ã«åœ±é¿ãäžããããšãªãæ©èœãããããšãã§ããã®ã§ããããå¯èœã§ããããšãç¥ã£ãŠããŸãã
ãã®åé¡ãåéããããã®+1ã ã¢ããªãMaterial-UIããAntDã«ç§»è¡ããããšãããšããããåå ¥éå£ã«ãªããŸãã
åéããã«ã¯+1ã babel-plugin-import
ã¯ç§ã«ã¯ããŸããããŸããããã¹ãŠã®tutsãšæ瀺ãè©ŠããŸããã ã¢ããªã®ã°ããŒãã«ãã©ã³ããå€æŽã§ããŸããð±
blueprintjs palantir / blueprintïŒ244ã«é¢é£ããåé¡ããããŸããã
1ã€ã®ææ¡ã¯ãcss-byebyeãšåŒã°ããpostcssãã©ã°ã€ã³ã䜿çšããããšã§ãã
https://github.com/AoDev/css-byebye
ããã¯äžæçãªè§£æ±ºçãšããŠåœ¹ç«ã€å ŽåããããŸãã
çŽ æŽãããã©ã€ãã©ãªã§ããããŠãŒã¶ãŒãæ±ãããã®æãããæ¹æ³ã§ãã ããã©ã«ãã®ãã©ã³ããå€æŽããå¿ èŠãããã®ã¯ãªãã§ããïŒ ãããŠããªããã©ã³ããšã¹ã¿ã€ã«ããªã»ããããæ¹æ³ããªãã®ã§ããïŒ
ããã«ãããç§ãã¡ïŒããã³ã³ã¡ã³ããèªãããšããå€æããä»ã®å€ãã®äººïŒããã®ã©ã€ãã©ãªã䜿çšã§ããªããªããŸãã
ãããèšèª/æåã®åé¡ã§ãããã©ããã¯ããããŸãããããã®ã©ã€ãã©ãªã®éçºè ã¯æ³šæããŠãã ããïŒèª°ã䜿ããããªãã©ã€ãã©ãªãäœæããããšã®ãã€ã³ãã¯äœã§ããïŒ ãªãããªãã¯ããªãã®ä»²éã®éçºè ãããªãã®ã©ã€ãã©ãªã䜿ãã®ãé£ããããŠããã®ã§ããïŒ
誰ã䜿ããããªãã©ã€ãã©ãªãäœãæå³ã¯äœã§ããïŒ ãªãããªãã¯ããªãã®ä»²éã®éçºè ãããªãã®ã©ã€ãã©ãªã䜿ãã®ãé£ããããŠããã®ã§ããïŒ
é©åºŠã«ä¿ã£ãŠãã ããã
å€ãã®éçºè
ãã¹ã¿ãŒãã¢ããã¯ããã®ã©ã€ãã©ãªã䜿çšããŠãããã䜿çšããããšèããŠããŸãã
ãã®ã©ã€ãã©ãªã¯ãªãŒãã³ãœãŒã¹ã§ç¡æã§ãã 䜿ããããªãå Žåã¯äœ¿ããªãã§ãã ããã
å€æŽãããå Žåã¯ãèªåã§äœ¿çšããããã«ãã©ãŒã¯ããããPRãéä¿¡ã§ããŸããant-designã®ã¡ã³ããã¯å¯ä»ãåãä»ããŠããŸãã
ãããã£ãŠãããã§æŽèšãåãå¿ èŠã¯ãããŸããã
ãã®åé¡ã¯ãç§ã®ããŒã ã«ãšã£ãŠã倧ããªåé¡ã§ãã
ç§ãã¡ã¯ãã®ãããžã§ã¯ããšè¡ããããã¹ãŠã®äœæ¥ã倧奜ãã§ããããã®1ã€ã®åé¡ã®ããã«ãããžã§ã¯ãã䜿çšã§ããŸããã
ãã®ãããè¿ãå°æ¥ã«ä¿®æ£ãåéãããããšãæåŸ ããŠããã®åé¡ãåŒãç¶ããã©ããŒããŠããŸãã
ãããç§ã¯ãšãŠãç©å¥ã§ãã ãããŠãç§ã¯ããã§æŽèšãåããŠããŸããã
ããªãã®ã©ã€ãã©ãªã¯ãããšããããçŽ æŽããããšããŠããäžå¿ èŠãªå¯äœçšãæã£ãŠã¯ãªããªãããšã«æ³šæãåããŠããŸãã ããšãã°ãMomentJSã䜿çšããŠãã¯ãªã³ãŽã³èªã§æ¥ä»ãšæå»ã®è¡šç€ºãéå§ãããšããŸãã
ãèªåã§ãã©ãŒã¯ããããçãã§ã¯ãããŸããã å®éãããã¯å€ãã®ãªãŒãã³ãœãŒã¹ãããžã§ã¯ãã®æ²ããåããªç¶æ ã§ãã
ç§ãã¡ã¯èªåãã¡ã§è€éãªã·ã¹ãã ãæ§ç¯ããŠããŸã-ç§ãã¡ã¯ããã§ã¯æ°äººã§ã¯ãããŸããã ç§ãã¡ã¯å³æžé€šãå©çšããŠç掻ãç¶ããããšæã£ãŠããŸãã å°ãªããšããããã©ã«ãã®ãã©ã³ãããã©ã³ããµã€ãºãå€æŽããªãããã«ã©ã€ãã©ãªã«äŸé Œããæ¹æ³ãããã¯ãã§ãã ãããç§ïŒãããŠããã«ããä»ã®äººãã¡ïŒãæ±ããŠãããã¹ãŠã§ãã
ããªãã¯è³ãèãããªãããšãéžæãããããã®æžå¿µãç¡èŠããããšãã§ããŸã-ç§ã®èšèã®éžæã®ä»£ããã«éäžãã-ãŸãã¯ããªãã¯ããã®äººã ãèšã£ââãŠããããšãç解ããå¯äœçšãªãã«ããªãã®ã©ã€ãã©ãªã䜿çšããæ¹æ³ãæäŸããããšãéžæã§ããŸãã
ããªããé·çãããŠç¹æ ããŠããéãåãããªããšå ±ã«ãããŸãããã«ã
@kotpalã«ãã以äžåæã§ããŸããã§ããã ãã®è°è«ãããã®æ©èœãè¿œå ã§ããŸãããããçŽ æµãããªãããã§ã¯ãªããæåéããã³ã³ããŒãã³ããã°ããŒãã«ã«å¹²æžããŠã¯ãªããªãããšãäœè ã«çŽåŸãããããšããŠããããšã«é©ããããŸããå·ã ReactJSã®ã³ã¢ã³ã³ã»ãããšã¢ãžã¥ã©ãŒãã¶ã€ã³ã¯æåéããã€ã³ããã©ã³ã¯ã§ãã
ã°ããŒãã«ãªããŒããªã©ãæäŸããŠããå Žåãé€ããŠãã°ããŒãã«ãªãã®ãããããªãã§ãã ããã
@abenhamdineãèšã£ãŠããããšãããããŸãã ããããç§ã@stronguiã«åæããŸãã
ãã¶ããAntã¯å šäœã®çµéšã«ãªãã¯ãã§ãã ãããå®éã«ã¯ãå€ãã®äººã¯ãŸã ãããå€æŽã§ããªãã¬ã¬ã·ãŒã³ãŒãã§äœæ¥ããå¿ èŠããããŸãã ãããŠããã®ãããžã§ã¯ãããã®å€ãã³ãŒããšè¡çªããå ŽåãããããReactïŒãŸãã¯ãã®ãããªä»ã®ãã¬ãŒã ã¯ãŒã¯ïŒã䜿çšããããšã®ãã¹ãŠã®å©ç¹ã倱ãããŸãã
ãã®åé¡ãéåžžã«å€ãã®äººã ããããžã§ã¯ããå®å šã«æ¡çšããã®ã劚ããŠããã®ãªããç§ãã¡ã¯äžç·ã«ãªã£ãŠãããžã§ã¯ãã«è³éããããããšãã§ããã§ããããïŒ
ãã®åé¡ãèªåã§ä¿®æ£ããç¥èãæéããªãããšãç¥ã£ãŠããã®ã§ãå¯çš¿è ãä¿®æ£ããã«ã¯äœãå¿ èŠã§ããïŒ ïŒã¯ããããã¯åé¡ã§ãããæ©èœã§ã¯ãããŸããïŒ
antdã«ãã£ãŠæäŸãããã°ããŒãã«cssããªãŒããŒã©ã€ãããã¹ã¿ã€ã«ä»ãjsxãªã©ã®ãããžã§ã¯ãã䜿çšããããšã§ããçšåºŠã®æåãåããŸããã
ããã«å±éããããµã€ããèŠãããšãã§ããŸãïŒ è¿œäŒžïŒé²è¡äžã®äœæ¥ã§ãã
ç§ã¯ã¡ããã©åãç¶æ³ã«ããããšã«æ°ã¥ãã@ invertsãš@corinnebrady ïŒhttps://github.com/ant-design/ant-design/issues/4331#issuecommentïŒã§èª¬æãããŠããã®ãšåãã¢ãããŒãã䜿çšããŠäžçšåºŠã®æåãåããŠããŸãã -361421192ããã³https://github.com/ant-design/ant-design/issues/4331#issuecomment-365481037ïŒã ãããã£ãŠãç§ã®ã³ã³ããŒãã³ãã®ããã€ãã¯æ¬¡ã®ããã«ãªããŸãã
// ...
import Modal from 'antd/lib/modal'
import 'antd/lib/modal/style/index.css'
import AutoComplete from 'antd/lib/auto-complete'
import 'antd/lib/auto-complete/style/index.css'
import Form from 'antd/lib/form'
import 'antd/lib/form/style/index.css'
import 'antd/lib/select/style/index.css'
import Button from 'antd/lib/button'
import 'antd/lib/button/style/index.css'
// ... etc
ããã¯ã»ãšãã©ã®antdã³ã³ããŒãã³ãã§ããçšåºŠåé¡ãªãæ©èœããŸãããç¹å®ã®cssãã¡ã€ã«ãé¢é£ä»ããããŠããªããã®ãããããã®ã¹ã¿ã€ã«ã¯ã°ããŒãã«ã³ã³ããŒãã³ãã§ã®ã¿èŠã€ããããšãã§ããŸãã ããã¯icon
ã³ã³ããŒãã³ãã®å Žåã§ãããããããæ©èœãããã«ã¯ãã¢ã€ã³ã³ã«é¢é£ãããã¹ãŠã®ã¹ã¿ã€ã«ãã°ããŒãã«ãã¡ã€ã«ããèªåã®ã¹ã¿ã€ã«ã·ãŒãã«æåã§ã³ããŒããå¿
èŠããããŸããã ã¡ã³ããïŒ antd/lib/icon/style/index.css
ãå«ããPRãåãå
¥ããŸããïŒ
import 'antd/lib/spin/style/index.less'
ãªã©ãåå¥ã®å°ãªããã¡ã€ã«ãå«ããããšãã§ããããã§ãã
ãã®åé¡ãå ¬åŒã«è§£æ±ºããèšç»ã¯ãããŸããïŒ
ããã§ãåé¡ã¯ãããŸããã @ reyronaldã説æãããããªåç §ã€ã³ããŒãã§ä¿®æ£ããããšããŠããŸãã
ç§ãIcon
ã®ã¹ã¿ã€ã«ã®åé¡ã§ç«ã¡åŸçããŠããŸãã
@ã¬ã€ããã«ãPRããŠé ããŸããïŒ
ããã«èŠããã§ãã人ã¯ããªããžããªããçŽæ¥ããã±ãŒãžãè¿œå ããŠç§ã®ãã©ãŒã¯ãè©ŠããŠã¿ãããšæããããããŸãã
yarn add github:serguzest/ant-design#3.4.1-NoCssPollution
ãŸã
npm install github:serguzest/ant-design#3.4.1-NoCssPollution
base.lessãé€å€ããä»ã®å€æŽãå ããã«ãã«ãããã ãã§ãã ç§ã®å Žåã¯æ©èœããŸãããå€ãã®ã³ã³ããŒãã³ãã䜿çšããŠããŸããã ãããžã§ã¯ãã«é©åãªãªã»ããã¹ã¿ã€ã«ã·ãŒãããŸã ãªãå Žåã¯ç¹ã«ãäžéšã®ã³ã³ããŒãã³ãã®å€èŠ³ã厩ããå¯èœæ§ããããŸãã ïŒ4546
ãã@ afc163ãŸããããã«é£ã³ä¹ã£ãŠããã®åé¡ãä¿®æ£ããããã®é³å£°ãè¿œå ããããšæããŸãã å€ãã®ã¿ãŒã²ããã䜿çšããŠå€§èŠæš¡ãªã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããã€ãã®ã¿ãŒã²ããã¯ãµãŒãããŒãã£ã®ãµã€ãã«èªã¿èŸŒãŸããŸãã antd
ãã°ããŒãã«CSSã«å¹²æžããããšã¯ããããã®ãµãŒãããŒãã£ãµã€ãã®CSSãªã»ãããšãã©ã³ããå¹ãé£ã°ããŠããŸãããåé¡ããããŸãã ç§ãã¡ã¯ã©ã€ãã©ãªã倧奜ãã§ãã¡ã³ãããç§ãã¡ãæ¹åæ§ã«åããŠããããªããä¿®æ£ã«è²¢ç®ããããšæã£ãŠããŸãã ããäžåºŠéãããäŒè©±ãå¥ã®æªè§£æ±ºã®åé¡ã«åããŠãã ããã ããããšã
ãããã£ãŠãïŒå°ãªããšããããŸã§ã®ãšããïŒWebpackã®æäœã䜿çšããŠã代æ¿ã®lessãã¡ã€ã«ãããŒãããããšã§ããããæ©èœãããããšãã§ããŸããã
new webpack.NormalModuleReplacementPlugin(
/node_modules\/antd\/lib\/style\/index\.less/,
path.resolve(rootDir, 'src/styles.less')
),
src/style.less
ãã¡ã€ã«ã¯index.less
ãã¡ã€ã«ãšåããã¡ã€ã«ãããŒãããŸããããããã¬ãã«ã»ã¬ã¯ã¿ãŒã®ã¹ã³ãŒãå
ã§ããããããŒãããŸãã
#root {
<strong i="11">@import</strong> '~antd/lib/style/core/index.less';
<strong i="12">@import</strong> '~antd/lib/style/themes/default.less';
}
ãã®çµæããã¹ãŠã®ãã°ããŒãã«ãã¹ã¿ã€ã«ã#root
ã¹ã³ãŒãã§é©çšãããŸãã
`#rootèšäºã
衚瀺ãããã¯;
}
`
ç...
ããã誰ãã«åœ¹ç«ã€ããšãé¡ã£ãŠããŸãã
çãããããã¯æ¬åœã«è¿·æã§ãã ãã®ã¹ã¿ã€ãªã³ã°åäœã¯ãã¯ãŒã«ãã¯ã©ã¹ã®UIã©ã€ãã©ãªã«æåŸ ãããã®ã§ã¯ãããŸããã
å°ãªããšãããã¥ã¡ã³ãã§ã°ããŒãã«ãªã»ããã«ã€ããŠèšåããŠããã®ã§ã人ã ã¯æ··ä¹±ããŸããã ãŸãã¯ãåã ã®ã¹ã¿ã€ã«ãšã¢ã€ã³ã³ã®ã€ã³ããŒãã«é¢ããã¬ã·ããå«ããã¬ã¬ã·ãŒWebãµã€ããžã®çµ±åãã¬ã€ãã圹ç«ã€ã§ãããã
ã¡ã³ããã¯ããã以æ¥è°è«ã«åå ããŠããªãããããã®å·ãéããããåŸãéäŒãããšæããŸãããããã£ãŠãæ°ããå·ãéãããçŽæ¥pingããããPRãéããªãéãããã®åé¡ã«é¢ããå ¬åŒã®ãµããŒãã¯åããããªãã§ãããã
ç§ã¯ã€ãã«ãå
ã®antd.cssã«åºã¥ããŠããã¹ãŠã®ã«ãŒã«ã®åã«ã«ã¹ã¿ã ã¯ã©ã¹ãä»ããæ°ããCSSãã¡ã€ã«ãäœæããããšã§ããã®åé¡ãåé¿ããæ¹æ³ãèŠã€ããŸããã ç§ã®ãœãªã¥ãŒã·ã§ã³ã§ã¯ãPostCSSãGulpãããã³postcss-prefixwrap
ãã©ã°ã€ã³ã䜿çšããŠããŸãã
https://gist.github.com/sbusch/a90eafaf5a5b61c6d6172da6ff76ddaa
å®ç§ã«ã¯ã»ã©é ãã§ãããé©ãã»ã©ããŸãæ©èœããŸãã å°ãªããšãç§ã®ããŒãºã®ããã«;-)
èŠç¹ã«ã¯ãæ¥é èŸ.antd-ns
ïŒ "åå空é"ã®çç¥åœ¢ãšã㊠"ns"ïŒãä»ããantd
CSSã®æ¢è£œããŒãžã§ã³ãå«ãŸããŠããŸãã
ããŒãïŒ
ç§ã«ãšã£ãŠéèŠãªèŠä»¶ã¯ãèªååãããŠããããšã§ããããã®ãããæ°ããantã®ãªãªãŒã¹ããšã«ãã¬ãã£ãã¯ã¹ä»ãã®CSSãç°¡åã«äœæã§ããŸãã
postcss-prefixwrap
ã¯å°ãªããšãããŒãžã§ã³1.3.0ã§ããå¿
èŠããããŸããããã«ã¯ã antd
ããŒãã¬ãŒã ã¢ãã¡ãŒã·ã§ã³ãä¿æããããã®ããããå«ãŸããŠããŸããã³ã¡ã³ã/ãã£ãŒãããã¯ã¯åžžã«æè¬ããŠããŸãïŒ
圌ã®ãã°ãããPostCSSpostcss-prefixwrapãã©ã°ã€ã³ã§ãããå¯èœã«ããŠããã@dbtedmanã«æè¬ããŸãã
ã³ã¡ã³ã/ãã£ãŒãããã¯ãããã ããã°å¹žãã§ãã
ç§ã¯ã€ãã«ãå ã®antd.cssã«åºã¥ããŠããã¹ãŠã®ã«ãŒã«ã®åã«ã«ã¹ã¿ã ã¯ã©ã¹ãä»ããæ°ããCSSãã¡ã€ã«ãäœæããããšã§ããã®åé¡ãåé¿ããæ¹æ³ãèŠã€ããŸããã
ããã¯ç§èŠã§æãç°¡åãªè§£æ±ºçã§ãã
å人çã«ã¯ãçŸåšããã¯å¿
èŠãããŸãããã誰ããPRãéä¿¡ããŠãããå°ãªããã¡ã€ã«ã®åcssã«ãŒã«ã®åã«ã¯ã©ã¹åã®å°ãªãå€æ°ïŒããšãã°.@{scope}
ïŒãè¿œå ãããšã誰ã«ãšã£ãŠãæçã§ãã
ããã©ã«ãã§ã¯ãçŸåšã®åäœãå£ããªãããã«ããã®å€æ°ã¯ç©ºã«ãªããŸãã
ã¹ã¿ã€ã«ãåé¢ããã«ã¯ãããšãã°antd
ã䜿çšããŠå€æ°ãèšå®ããã ãã§æžã¿ãŸãã
ãã®è§£æ±ºçã¯ã¡ã³ããã«ãšã£ãŠåãå ¥ããããåé²ããããšãã§ãããšæããŸãã
ãããç§ã®ããã«åããåé¿çã§ãã styles.less
ãã¡ã€ã«ãäœæããŸãã
// Doing what antd/lib/style/core/index.less does
// but without loading "base" which overwrites global styles
<strong i="7">@import</strong> '~antd/lib/style/mixins/index.less';
<strong i="8">@import</strong> '~antd/lib/style/core/iconfont.less';
<strong i="9">@import</strong> '~antd/lib/style/core/motion.less';
<strong i="10">@import</strong> '~antd/lib/menu/style/index.less';
<strong i="11">@import</strong> '~antd/lib/dropdown/style/index.less';
<strong i="12">@import</strong> '~antd/lib/button/style/index.less';
<strong i="13">@import</strong> '~antd/lib/checkbox/style/index.less';
<strong i="14">@import</strong> '~antd/lib/grid/style/index.less';
.babelrc
ã§ç§ã¯æã£ãŠããŸãïŒ
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": false,
}
]
]
https://ant.design/docs/react/getting-started#Import-on-Demandããã³https://github.com/ant-design/babel-plugin-importã§èª¬æãããŠããããã«JSãã«ããµã€ãºãæé©åãããã
ã«ã¹ã¿ãã€ãºãããã¹ã¿ã€ãªã³ã°ã®ããã«ãwebpackã®èšå®ã次ã®ããã«å€æŽããŸããã
module: {
rules: [{
test: /\.less$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'less-loader',
options: {
javascriptEnabled: true,
modifyVars: {"primary-color": "#ed1c24"},
}
}]
}]
}
https://ant.design/docs/react/customize-theme#1ïŒ-Using-theme-property-ïŒrecommended-wayïŒã§èª¬æãããŠããããã«
ãšããã§ïŒ new webpack.IgnorePlugin(/style\/core\/base/)
ã䜿çšããŠããã®ãbase.lessããã¡ã€ã«ã®åŠçãç¡èŠããããšããŸããããæ©èœãããããšãã§ããŸããã§ããã çç±ã¯ããããŸããã ç§ã®ä»®èª¬ã¯ãWebpackã§çŽæ¥åŠçãããã®ã§ã¯ãªããLESSã§åŠçãããããã§ãã
ãã®äŸ¡å€ã®ããã«ãç§ã¯antd.cssãæåã§ç·šéãã䜿çšããŠããantdã³ã³ããŒãã³ããå£ãããšãªãäžèŠãªã¹ã¿ã€ã«ãåé€ããããšãã§ããŸããã
@paneqç§ã¯çŸåšåãããšãããŠããŸãã babel-plugin-import
ã®ã¹ã¿ã€ã«ãªãã·ã§ã³ãé¢æ°ã§ããå¯èœæ§ããããã¹ã¿ã€ã«ãå«ãããã©ããã決å®ã§ããããšã«æ³šæããŠãã ããã ããŸããããŸããã§ããã ããããããã°ããå¿
èŠããããŸãâŠ
å€åç§ããã®ãªãã·ã§ã³ã誀解ããŠããŸããïŒ
@paneqããªããè¡ã£ãããšãã³ããŒããŸãããããããŸã§ã®ãšããæ©èœããŠããããã§ãããã©ã®ã³ã³ããŒãã³ãããã®ã°ããŒãã«cssãå¿ èŠãšãããã確èªããã®ã«ååãªã³ã³ããŒãã³ããè©ŠããŠããŸããã ããããšã
@vthinkxie
ããã«ã¡ã¯ã.antã§å§ãŸããã¹ãŠã®èŠçŽ ãäžèŽãããŠãã¹ã¿ã€ã«ãå²ãåœãŠãããšãã§ããã¯ãã§ãã
* [class ^ = 'ant-'] {
ããã¯ã¹ãµã€ãºïŒborder-box;
-webkit-tap-highlight-colorïŒrgbaïŒ0ã0ã0ã0ïŒ; //ã¢ãã€ã«ãµãã¡ãªã®ã¿ãããã€ã©ã€ãã«ã©ãŒãåé€ããŸã
}
ã¯ãã¹ãã©ãŠã¶äºææ§ããããå®è£ ã«æéãããããªãã¯ãã§ãã
ãããã£ãŠãïŒå°ãªããšããããŸã§ã®ãšããïŒWebpackã®æäœã䜿çšããŠã代æ¿ã®lessãã¡ã€ã«ãããŒãããããšã§ããããæ©èœãããããšãã§ããŸããã
new webpack.NormalModuleReplacementPlugin( /node_modules\/antd\/lib\/style\/index\.less/, path.resolve(rootDir, 'src/styles.less') ),
src/style.less
ãã¡ã€ã«ã¯index.less
ãã¡ã€ã«ãšåããã¡ã€ã«ãããŒãããŸããããããã¬ãã«ã»ã¬ã¯ã¿ãŒã®ã¹ã³ãŒãå ã§ããããããŒãããŸãã
#root { <strong i="12">@import</strong> '~antd/lib/style/core/index.less'; <strong i="13">@import</strong> '~antd/lib/style/themes/default.less'; }
ãã®çµæããã¹ãŠã®ãã°ããŒãã«ãã¹ã¿ã€ã«ã
#root
ã¹ã³ãŒãã§é©çšãããŸãã
ã©ã®ããŒãžã§ã³ã®less-loaderã䜿çšããŠããŸããïŒ 3.0.0ã§ããåäœããªãããã§ããïŒ èŠãã äŸïŒ https ïŒ//github.com/webpack-contrib/less-loader/issues/184
ãŸãããã®åé¿çã«ã¯ã©ã®ããŒãžã§ã³ã®antdã䜿çšããŠããŸãããïŒ ç§ãå°ããŠããçç±ã¯ã antd @ 3.7.3ãš[email protected]ã§ãæåããªãã£ãããã§ãïŒwebpackã¯å€æŽåŸã«è§£æ±ºããã®ã«åé¡ããããŸããïŒã ..
ããã誰ãã«åœ¹ç«ã€ãã©ããã¯ããããŸãããã䜿çšäžã®ã³ã³ããŒãã³ãã®ã¿ã®CSSãã€ã³ããŒãããã®ã«æ¬¡ã®ããšã圹ç«ã¡ãŸããã
import Modal from 'antd/lib/modal'
import 'antd/lib/modal/style/css'
ããã誰ãã«åœ¹ç«ã€ãã©ããã¯ããããŸãããã䜿çšäžã®ã³ã³ããŒãã³ãã®ã¿ã®CSSãã€ã³ããŒãããã®ã«æ¬¡ã®ããšã圹ç«ã¡ãŸããã
import Modal from 'antd/lib/modal'
import 'antd/lib/modal/style/css'
ãããããã¯å€ãã®ã³ã³ããŒãã³ãã§åé¡ãªãæ©èœããããã§ãã ãã ãããã€ã¬ãŒãžã¯ç°ãªãå ŽåããããŸããå°ãªããšãSelectã«ã¯ãã³ã³ããŒãã³ãèªäœã®ã¹ã¿ã€ã«ä»¥äžã®ãã®ãå¿ èŠã§ãã éžæç¯å²ã®ãåé€ãã¢ã€ã³ã³ã¯ããã以å€ã®å Žåã¯è¡šç€ºãããŸããã åé¡ãå®å šã«è¿œè·¡ããæéããããŸããã§ããããç§ã¯ãããããã€ããŒãªãã®ã§ãã ãã®ãããäžéšã®ã³ã³ããŒãã³ãã®ã¡ã€ã³ã¹ã¿ã€ã«ããäžéšã®ã¹ã¿ã€ã«ãæš¡å£ããå¿ èŠãããå ŽåããããŸãã
ãã®ãªãã·ã§ã³ã¯å®å šã§ã¯ãããŸããããå€ãã®ã³ã³ããŒãã³ãã§ããŸãæ©èœããå¯èœæ§ããããŸãã ã«ã¹ã¿ã ã¹ã¿ã€ã«ã¯æŽæ°ã«ãã£ãŠç Žæãããªã¹ã¯ããããŸãããæŽæ°ãå®è¡ããã¿ã€ãã³ã°ãæããã«å¶åŸ¡ã§ããŸãã
ç§ãã¡ã®çµç¹ã§èŠã€ããæåã®è§£æ±ºçã¯ãantdã®CSSã·ãŒãå šäœãå«ããantd以å€ã®ååã®ä»ããã¹ã¿ã€ã«ã«åœ±é¿ãäžããã¹ã¿ã€ã«ããã¹ãŠåé€ããããšã§ãã èµ°è¡è·é¢ã¯ç°ãªãå ŽåããããçŸåšã€ã³ããŒããããŠãã_every_ã¹ã¿ã€ã«ã«ã¯æããã«æ¬ ç¹ããããŸãã ããããããã¯ããŸãæ©èœããçŽ2ãæéãåé¡ã¯çºçããŠããŸããã
@jaleikas
ããã«é¢ããåé¿çãèŠã€ããŸãããïŒ ç§ã®ç¥ãéãã less-loader @ 4.xã®åé¡ã¯ãŸã 解決ãããŠããªããããNormalModuleReplacementPluginã§ææ¡ãããä¿®æ£ã¯æ©èœããŸããã æåã§ãªãŒããŒã©ã€ãããŠã¹ã³ãŒããèšå®ã§ããããããã®ãœãªã¥ãŒã·ã§ã³ã¯å®éã«ã¯æè¯ã®ãœãªã¥ãŒã·ã§ã³ã®ããã«èŠããŸãã
ç§ã¯ããªããšåãããšãè©Šããless-loaderãããŠã³ã°ã¬ãŒãããŸããããwebpackresolveãæ©èœããŸããã
ããã§[email protected]ã䜿çšããŸãã
ããã«èŠããã§ãã人ã¯ããªããžããªããçŽæ¥ããã±ãŒãžãè¿œå ããŠç§ã®ãã©ãŒã¯ãè©ŠããŠã¿ãããšæããããããŸãã
yarn add github:serguzest/ant-design#3.4.1-NoCssPollution
ãŸã
npm install github:serguzest/ant-design#3.4.1-NoCssPollution
ããŒã¹ãç Žæ£ããŠãä»ã®å€æŽãå ããã«ãã«ãããŸããã ç§ã®å Žåã¯æ©èœããŸãããã³ã³ããŒãã³ãã®å€ãã¯äœ¿çšããŠããŸããã ãããžã§ã¯ãã«é©åãªãªã»ããã¹ã¿ã€ã«ã·ãŒãããŸã ãªãå Žåã¯ç¹ã«ãäžéšã®ã³ã³ããŒãã³ãã®åœ±é¿ãåããå¯èœæ§ããããŸãã ïŒ4546
ããã¯ç§ã®ããã«åã
ããã«èŠããã§ãã人ã¯ããªããžããªããçŽæ¥ããã±ãŒãžãè¿œå ããŠç§ã®ãã©ãŒã¯ãè©ŠããŠã¿ãããšæããããããŸãã
yarn add github:serguzest/ant-design#3.4.1-NoCssPollution
ãŸã
npm install github:serguzest/ant-design#3.4.1-NoCssPollution
base.lessãé€å€ããä»ã®å€æŽãå ããã«ãã«ãããã ãã§ãã ç§ã®å Žåã¯æ©èœããŸãããå€ãã®ã³ã³ããŒãã³ãã䜿çšããŠããŸããã ãããžã§ã¯ãã«é©åãªãªã»ããã¹ã¿ã€ã«ã·ãŒãããŸã ãªãå Žåã¯ç¹ã«ãäžéšã®ã³ã³ããŒãã³ãã®å€èŠ³ã厩ããå¯èœæ§ããããŸãã ïŒ4546
ãã®è§£æ±ºçãããããšãïŒ
ããã«é¢ããåé¿çãèŠã€ããŸãããïŒ ç§ã®ç¥ãéãã less-loader @ 4.xã®åé¡ã¯ãŸã 解決ãããŠããªããããNormalModuleReplacementPluginã§ææ¡ãããä¿®æ£ã¯æ©èœããŸããã æåã§ãªãŒããŒã©ã€ãããŠã¹ã³ãŒããèšå®ã§ããããããã®ãœãªã¥ãŒã·ã§ã³ã¯å®éã«ã¯æè¯ã®ãœãªã¥ãŒã·ã§ã³ã®ããã«èŠããŸãã
ç§ã¯antdã®äœ¿çšããããããšã«ããã¹ã¿ã€ã«ã®ãªãã³ã³ããŒãã³ãïŒrc-switchãªã©ïŒãéžã¶ããšã«ããŸããã åé¡ã¯ãã»ãšãã©ã®ãã¹ã¿ã€ã«ãèšå®ãããŠããªããã³ã³ããŒãã³ããã²ã©ã/ææžåãããŠããããäžéšã®ã³ã³ããŒãã³ããç°ãªãåäœãããŠããããã«èŠããããšã§ãããã®ãããã»ãšãã©ã®å Žåãç§ã¯ãããããŠä»ã®å Žæã調ã¹ãŸãã...
ããã«ã¡ã¯ã.antã§å§ãŸããã¹ãŠã®èŠçŽ ãäžèŽãããŠãã¹ã¿ã€ã«ãå²ãåœãŠãããšãã§ããã¯ãã§ãã
* [class ^ = 'ant-'] {
ããã¯ã¹ãµã€ãºïŒborder-box;
-webkit-tap-highlight-colorïŒrgbaïŒ0ã0ã0ã0ïŒ; //ã¢ãã€ã«ãµãã¡ãªã®ã¿ãããã€ã©ã€ãã«ã©ãŒãåé€ããŸã
}ã¯ãã¹ãã©ãŠã¶äºææ§ããããå®è£ ã«æéãããããªãã¯ãã§ãã
@ tylik1 ãããããšãïŒ ç§ã®electronã¢ããªã®æ®ãã®éšåãšäžèŽããããã«ãã©ã³ããã¡ããªãä¿®æ£ããå¿ èŠããããŸããã ããã¯å®å šã«ç§ãæã£ãã
ããã誰ãã«åœ¹ç«ã€ãã©ããã¯ããããŸãããã䜿çšäžã®ã³ã³ããŒãã³ãã®ã¿ã®CSSãã€ã³ããŒãããã®ã«æ¬¡ã®ããšã圹ç«ã¡ãŸããã
import Modal from 'antd/lib/modal'
import 'antd/lib/modal/style/css'
ããã¯æ¬¡ã®ããã«ç§ã®ããã«åããŸãã
import Icon from 'antd/lib/icon';
import 'antd/lib/icon/style/index.css';
æ®å¿µãªãããããã¯ã·ã§ãŒã¹ããããŒã§ãã ãŸããæ¥ä»ããã«ãŒã¯ãããŸã§ã«èŠã€ããäžã§æé«ã®ãã®ã§ãããAntdã¯å®è£ ããŸããã
çŸåšãåœç€Ÿã®Reactã³ã³ããŒãã³ãã©ã€ãã©ãªãæ¢ããŠããŸããããããããããã³ã°ã®åé¡ã§ãããantã䜿çšããŠããªãå¯èœæ§ããããŸãã
ãŸããåªããããŒããªãã·ã§ã³ãåããreact MUIãæ€èšããŠããŸãããããããããããã©ã®ããã«å®è¡ããåæ§ã®æ©èœãå®è£ ãããã確èªã§ããŸãã
https://www.npmjs.com/package/patch-packageã䜿çšããŠã³ã¡ã³ãã¢ãŠãããŸãã
// import 'normalize.css/normalize.css';
antd-mobile/es/style/index.js
ããã
ç§ã®ç®çã¯next.js
ããã«ãããããšã ã£ãã®ã§ãç§ã®å Žåã¯ã代ããã«ããããŒã«CNDãªã³ã¯ãå«ããŸããã
ããã¯2020幎ã§ããã人é¡ã¯æ»ã«ãŸãããã³ãããŠã€ã«ã¹ãant-designã¯ãããžã§ã¯ãã«ã°ããŒãã«ãªã¹ã¿ã€ã«ãè¿œå ããŸã...
ïŒ9363ã§ã®è¿œè·¡
æãåèã«ãªãã³ã¡ã³ã
ããããããã¯ã²ã©ããã¶ã€ã³ã§ãã