์๋ ํ์ธ์. Semantic UI๋ฅผ ์ฌ์ฉํ๋ ค๊ณ ํ๋๋ฐ ๋ชจ๋ CSS๊ฐ ์ฌ๋ผ์ง๊ณ ์์ต๋๋ค. ๋ฌธ์ ๋ Semantic UI๊ฐ ์ ์ญ ๋ค์์คํ์ด์ค์์ jQuery๋ฅผ ์์ํ๋ค๋ ๊ฒ์ ๋๋ค. ๊ฐ์ ธ์ค๊ธฐ ์ํด ๋ค์์ ์๋ํ์ง๋ง ์ฌ์ ํ 'jQuery'๊ฐ ์ ์๋์ง ์์์ต๋๋ค.
//file: config.js
import jquery from 'jquery';
global.$ = jquery;
global.jQuery = jquery;
import './semanticui'
์ด๊ฒ์ด ์ด๋ป๊ฒ ๋ฌ์ฑ๋ ์ ์์ต๋๊น?
์ข์, ์ด ์ฝ๋๋ฅผ ๋ด ๊ธฐ๋ณธ .stories/index
ํ์ผ์ ๋ฃ์ ๋ ์ด๊ฒ์ ํธ๋ฆญ์ ์ํํ๋ ๊ฒ์ฒ๋ผ ๋ณด์์ต๋๋ค.
import jquery from 'jquery';
global.$ = jquery;
global.jQuery = jquery;
require('./semanticui');
@tomitreskak ๊ฐ์ฌํฉ๋๋ค.
npm install semantic-ui-css --save-dev
ํจํค์ง๋ก ๊ฒฐ์ ํ๊ณ ๋ค์๊ณผ ๊ฐ์ด ํ์ผ์ ์ง์ ๊ฐ์ ธ์ต๋๋ค.
// config.js
import jquery from 'jquery';
global.$ = jquery;
global.jQuery = jquery;
require('semantic-ui-css/semantic.css');
require('semantic-ui-css/semantic.js');
jQueryUI ๋ฅผ ํตํฉํ๋ ๋ฐ ๋ฌธ์ ๊ฐ ์์ด์ ์ฌ๊ธฐ์ ๋ด๊ฐ ํ ๋ฐฉ๋ฒ์ด ์์ต๋๋ค. jquery-ui ๋ชจ๋์ ์ฌ์ฉํฉ๋๋ค.
// config.js
import jquery from "jquery";
import jQueryAutocomplete from "jquery-ui/ui/widgets/autocomplete";
import jQueryDatepicker from "jquery-ui/ui/widgets/datepicker";
jquery.autocomplete = jQueryAutocomplete;
jquery.datepicker = jQueryDatepicker;
global.$ = jquery;
global.jQuery = jquery;
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
@tomitreskak ๊ฐ์ฌํฉ๋๋ค.
npm install semantic-ui-css --save-dev
ํจํค์ง๋ก ๊ฒฐ์ ํ๊ณ ๋ค์๊ณผ ๊ฐ์ด ํ์ผ์ ์ง์ ๊ฐ์ ธ์ต๋๋ค.