Sto usando i moduli CSS (tramite il css loader Webpack) in un nuovo progetto React e, anche se funziona alla grande, ho problemi a far funzionare lo SCSS per React Select. Immagino che questo sia dovuto al fatto che tenta di creare nomi di classe local
, a cui il JS in react-select
non è a conoscenza. C'è un modo per importare un intero file .scss
, ma con scope globale invece che localmente?: Come disabilitare l'ambito locale per un file?
risposta
Quando si utilizza il css loader nella configurazione Webpack, in genere si desidera attivare i moduli CSS con ?modules
abilitato in querystring, pertanto si attiva lo scope :local
per impostazione predefinita. Ciò significa che se si desidera dichiarare .selector { ... }
senza essere convertito, è necessario utilizzarlo in un :global(.selector) {}
.
Poiché si utilizza il caricatore SASS, nel caso in cui si desideri includere css da un fornitore, è possibile importarlo utilizzando @import "~react-select"
. Il problema, come hai detto, è che porterà tutti i selettori dalla libreria convertiti in locale. Per evitare questo, è possibile racchiudere l'importazione nel :global
allo stesso modo si fa con un selettore del tipo: :global { @import "~react-select"; }
Io generalmente definisco due caricatori CSS in questo modo:
// 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'
});
Ho anche migrati un app per I moduli CSS in passato hanno scoperto che era utile definire una convenzione basata sull'estensione del file, ad es {Nome} .module.css === moduli CSS vs {nome} css === globale 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'
});
Una soluzione alternativa che sta lavorando per me (da raschiare attraverso le edizioni GitHub), è la seguente:
Webpack2 configurazione (relativa sezione)
{
test: /\.css$/,
use: [{
loader: 'style-loader',
}, {
loader: 'css-loader',
options: {
modules: true,
},
}, {
loader: 'postcss-loader',
}],
}
moduleX.js
Uso slick-carousel
come esempio.
// 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';
In altre parole, tutto ciò che seguirà il vostro file di configurazione webpack opzioni configurate per il css-caricatore, tranne quando espressamente importarlo con diversi caricatori (l'! X! Y)
Se si hanno molti di eccezioni/globals, quindi la soluzione accettata potrebbe essere migliore.
- 1. IDEA IDE - disabilitare l'ispezione per un file
- 2. C'è un modo per disabilitare ReSharper per un file specifico?
- 3. Come controllo l'esistenza di un file locale
- 4. Come leggere un file JSON locale per il test
- 5. Come posso disabilitare l'amministratore di Django in un progetto distribuito, ma tenerlo per lo sviluppo locale?
- 6. Come disabilitare la modifica locale dei commit pubblici
- 7. Per php flush - come disabilitare gzip per file specifici?
- 8. Node-Webkit: come creare un file nel file system locale?
- 9. Come disabilitare default_scope per un belongs_to?
- 10. Come disabilitare `site.ENABLE_USER_SITE` per un ambiente?
- 11. Disabilitare il file Pid per il celibato
- 12. Come disabilitare un UISegmentedControl?
- 13. Come caricare un file locale su un modello Carrierwave?
- 14. Come disabilitare i file localhost_access_log per ColdFusion/Tomcat
- 15. phantomjs javascript legge un file locale riga per riga
- 16. Aggiungi collegamento per aprire un file locale in Google Documenti
- 17. Come disabilitare la postelaborazione per i file PDF in Paperclip?
- 18. TSC getta `TS2307: Impossibile trovare module` per un file locale
- 19. Un modo semplice per disabilitare un UITextField?
- 20. Phantomjs utilizza un file locale con page.includeJs?
- 21. emacs:. Come disabilitare la creazione # file
- 22. Leggere un file locale in django
- 23. Come trovare un URL per un repo GIT locale
- 24. AVPlayerStatus per file locale non pronto
- 25. Aggiornamento tabella MySQL da un file locale
- 26. Come faccio a salvare JSON per file di testo locale
- 27. Come disabilitare VirtualStore per i programmi C++?
- 28. Come disabilitare un widget "dijit.form.FilteringSelect"?
- 29. Come disabilitare un pulsante jqueryui
- 30. Come posso leggere l'indirizzo IP locale in un file .htaccess?
per fare questo lavoro è necessario creare un file .eslintrc con il seguente in esso. { "regole": { "import/no-webpack-loader-syntax": "off" } } – webmaster