CSS Modülleri: Bir dosya için yerel kapsamı nasıl devre dışı bırakırım?

Question

Yeni bir React projesinde CSS Modülleri (Webpack css yükleyici aracılığıyla) kullanıyorum ve harika çalışıyor olsa da, çalışmak için React Select SCSS'yi almamada sorun yaşıyorum. Bunun, react-select'daki JS'nin habersiz olduğu local classNames oluşturmaya çalıştığını hayal ediyorum. Tüm .scss dosyasını içe aktarmanın bir yolu var mı, ancak yerel olarak değil de global olarak kapsam oluşturuldu mu?

Answer 1

Webpack yapılandırmanızda css yükleyicisini kullandığınızda, tipik olarak, CSS Modüllerini, querystring'de etkinleştirilmiş ?modules ile etkinleştirmek istersiniz, bu nedenle :local kapsamını varsayılan olarak etkinleştireceksiniz. Bu, dönüştürülmeden .selector { ... } bildirmek isterseniz, bunu :global(.selector) {} içine kullanmanız gerektiği anlamına gelir.

SASS yükleyiciyi kullandığınızdan, css'yi bir satıcıdan dahil etmek isterseniz, @import "~react-select" numaralı telefonu kullanarak alabilirsiniz. Söylediğin problem, kütüphanenin tüm seçmenlerini yerel hale dönüştürmesi. Genellikle böyle iki CSS yükleyici tanımlamak :global { @import "~react-select"; }

Answer 2

:

// Global CSS 
// We make the assumption that all CSS in node_modules is either 
// regular 'global' css or pre-compiled. 
loaders.push({ 
    test: /\.css$/, 
    include: /node_modules/, 
    loader: 'style-loader!css-loader' 
}); 

// CSS modules 
loaders.push({ 
    test: /\.css$/, 
    exclude: /node_modules/, 
    loader: 'style-loader!css-loader?modules' 
}); 

Ben de bir uygulamayı göç ettik Bunu önlemek için, size böyle bir seçici ile yapmak aynı şekilde :global yılında ithalat koyabilirsiniz.Eğer Geçmişte CSS modülleri ve dosya uzantısına dayalı bir kongre tanımlamak yararlı oldu, örneğin, {Dosyaadı} .module.css === {dosyaadı} .css === Küresel CSS

// Global CSS 
loaders.push({ 
    test: /\.css$/, 
    exclude: /\.module\.css$/, 
    loader: 'style-loader!css-loader' 
}); 

// CSS modules 
loaders.push({ 
    test: /\.module\.css$/, 
    loader: 'style-loader!css-loader?modules' 
}); 

Answer 3

(github konularda kazıma itibaren) benim için çalışıyor alternatif bir çözüm vs CSS Modülleri, aşağıdaki gibidir:

Webpack2 yapılandırma (ilgili bölümü), bir örnek olarak slick-carousel kullanılması

{ 
     test: /\.css$/, 
     use: [{ 
      loader: 'style-loader', 
     }, { 
      loader: 'css-loader', 
      options: { 
       modules: true, 
      }, 
     }, { 
      loader: 'postcss-loader', 
     }], 
    } 

moduleX.js

. Başka bir deyişle

// Import the libraries css without the module gear being applied 
// 
import '!style-loader!css-loader!slick-carousel/slick/slick.css'; 

// Import my applications css. `styles` will be the typical 
// `slide_foo_xeh54` style set of module exports 
// (depending how you have your css-loader 
// configured 
// 
import styles from './Slides.css'; 

, her şey özel olarak sürü varsa farklı yükleyiciler (! x! y)

ile içe dışında css-yükleyici için yapılandırılmış seçenekler, sizin webpack yapılandırma dosyasını takip edecek istisnalar/globals, sonra kabul edilen çözüm daha iyi olabilir.