࣮ྫ 1. ίϯϙʔωϯτ͝ͱͷελΠϧΛ CSS Ͱॻ͘ .normal { /* all styles for Normal */ } .primary { /* all styles for Primary */ } components/button.css JS in CSS ͱҟͳΓɺελΠϧఆٛ CSS Ͱॻ͘͜ͱ͕Ͱ͖Δɻ
࣮ྫ 3. ͜ΕΒΛίϯύΠϧ͢ΔͱΫϥε໊͕ҰҙʹͳΔΑ͏ʹࣗಈม͞ΕΔ .components_button__normal___2_vnF { /* all styles for Normal */ } .components_button__primary___16yOh { /* all styles for Primary */ } style.css Submit HTML ग़ྗ͞ΕΔ HTML ͜Μͳײ͡ɻ ※ ίϯύΠϧ Webpack ͷ css-loader Λ͏ͷ͕ҰൠతɻʢBrowserify ͰՄೳͬΆ͍ɻʣ
Composition composes Λ͏ͱ Sass ͷ @extend ͷΑ͏ͳ͜ͱͰ͖Δɻ .base { /* all styles for Base */ } .normal { composes: base; /* all styles for Normal */ } .primary { composes: base; /* all styles for Primary */ } components/button.css