Sass con moduli CSS e pacchetto Web

Question

Sto costruendo un progetto per un po 'di tempo con i moduli Webpack, Sass e CSS. Normalmente nei miei file .scss, definisco una classe come:

:local(.button) { 
    color: white; 
} 

e nei miei componenti reagiscono, nel metodo render, mi richiedono gli stili:

render =() => { 
    const styles = require('./MyStyles.scss'); 
    <div className={ styles.button } /> 
} 

e tutto è buono con il mondo. Tutto funziona come previsto.

Ora, oggi stavo leggendo attraverso il CSS Modules page e ho notato che nessuno dei selettori sono stati comprendeva da :local() come la mia e, inoltre, che stavano importando gli stili come:

import styles from './MyStyles.scss'; 

E ho pensato: "Wow, che sembra molto più bello, è più facile vedere dove è importato, ecc. E mi piacerebbe non usare :local() e avere solo cose locali per impostazione predefinita. " Così l'ho provato e ho subito incontrato diversi problemi.

1) `importare stili da './MyStyles.scss';

perché sto utilizzando ESLint sul mio file reagire, ho subito un errore gettato che MyStyles.scss non ha un export di default che normalmente senso ma la pagina CSS Moduli dichiarato:

Durante l'importazione il modulo CSS da un modulo JS, esporta un oggetto con tutti i mapping dai nomi locali ai nomi globali.

quindi mi aspettavo naturalmente che l'esportazione di default del foglio di stile fosse l'oggetto a cui si riferiscono.

2) Ho provato import { button } from './MyStyles.scss';

Questo passa rilascio di fibre ma button i registri come indefinito.

3) Se si torna al metodo require per importare i miei stili, tutto ciò che non è specificato con :local non è definito.

Per riferimento, il mio caricatore webpack (sto anche compreso Node-Neat e Node-Bourbon, due librerie impressionante):

{ test: /.(scss|css)$/, loader: 'style!css?sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded&sourceMap&includePaths[]=' + encodeURIComponent(require('node-bourbon').includePaths) + 
'&includePaths[]=' + encodeURIComponent(require('node-neat').includePaths[1]) + '&includePaths[]=' + path.resolve(__dirname, '..', 'src/client/') } 

mie domande, a seguito di tutto questo, sono:

1) Quando si utilizza Moduli CSS con Sass, sono limitato all'utilizzo di :local o :global?

2) Poiché utilizzo il webpack, ciò significa anche che posso solo i miei stili require?

Answer 1

Poco dopo la pubblicazione, ho trovato la soluzione. Il problema, che pensavo fosse piuttosto confuso, era nella mia configurazione del Webpack. Originariamente il mio caricatore sembrava:

loader: 'style!css?sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded&sourceMap 

che ha permesso a me a 1) require mia Sass e 2) avvolgere i miei stili in :local.

Tuttavia, il caricatore css mancava l'opzione modules in modo che sembrava:

loader: 'style!css?modules&sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded&sourceMap 

Ora posso import il mio stile e non ho di metterli in :local (anche se presumo io ancora posso se voglio).

Quello che ho trovato più interessante di tutto questo è che senza l'opzione modules, si possono ancora usare le funzionalità dei moduli CSS, anche se un po 'limitanti.

EDIT:

Qualcosa che ho notato, un futuro di avvertimento a chi guarda questa risposta, è se si sta utilizzando il eslint-plugin-import per Lint le importazioni nel codice javascript, si genera un errore su di importare stili come :

import styles from './MyStyles.scss'; 

a causa del modo in cui i moduli CSS esportano l'oggetto di stili risultante. Ciò significa che ti verrà richiesto di fare require('./MyStyles.scss') per ignorare eventuali avvisi o errori.