CSS modüllerini LESS + yuvalama ile kullanabilir miyim?

Question

documentation on css-modules oldukça seyrek olduğundan, bunu yapıp yapamayacağımı emin değilim.

This article

Ben normal ve error devletler sahip bir düğme stil ediyorum yolu şu şekilde görünecektir diyor ki:

.common { /* font-sizes, padding, border-radius */ } 
.normal { composes: common; /* blue color, light blue background */ } 
.error { composes: common; /* red color, light red background */ } 

Ama bu gibi yazmak tercih ediyorum:

.common { 
    /* font-sizes, padding, border-radius */ 
    &.normal { /* blue color, light blue background */ } 
    &.error { /* red color, light red background */ } 
} 

Beğen Her zaman bu yeni composes sözdizimini tanıtmadan yaptım. Aslında onları kod içine yerleştirebiliyorsam, diğer stiller üzerinde hangi stillerin oluşturulduğunu daha açık bir şekilde görüyorum.

Ancak bunun css-modülleri tarafından nasıl dışa aktarılacağını bilmiyorum? Verdikleri tek örnek basit sınıf adı seçicidir. Ne .common.normal hakkında ihraç edilecek, veya .common > .normal ~ .strange nedir? Ben css-modülleri kullanırsam değil herhangi bir CSS seçiciyi kullanmalı mıyım?

Answer 1

Ayrıca css modülleriyle daha az kullanıyorum, ancak '&' uyumlarını css modülleriyle kullanmanın yollarını sanmıyorum. Anlayışımdan 'kompozisyonlar', &'dan daha hızlıdır ve psuedo sınıfları için yalnızca kendimi &'u kullanarak buluyorum.

Buradaki şeyleri burada yaptığınız gibi yapabilirsiniz, ancak HTML'de 'genel' ve 'normal' sınıflarını belirtmeniz gereken biraz garip bulmuyor musunuz? Benim düşünceme göre 'normal' belirtmek ve normalde 'oluştur' komutunu kullanarak paylaşılan stilleri miras bırakmak daha iyi.

Answer 2

CSS modülleri için bir webpack yükleyici kullanıyorsanız, postcss yükleyiciyi kullanabilir ve istediğiniz davranışı almak için çeşitli eklentiler ekleyebilirsiniz.

Örneğin, iç içe kurallar yazmanıza olanak veren "postcss-nested" eklentisi vardır.

Answer 3

.common { 
    /* font-sizes, padding, border-radius */ 
    :global { 
     &.normal { /* blue color, light blue background */ } 
     &.error { /* red color, light red background */ } 
    } 
} 

Bu benim çözümüm.

bu konuda biraz daha düşünme ise

.ramdomStrings { 
    /* I'm not sure if this exists, but it doesn't matter */ 
} 
.ramdomStrings.normal { /* blue color, light blue background */ } 
.randomStrings.error { /* red color, light red background */ }