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:Sass con moduli CSS e pacchetto Web
: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
?
Evento il carattere jolly ('.') nella proprietà' test' del caricatore, in questo modo: 'test:/\. (Scss | css) $ /' – zedd45