Includere CSS (Sass) da più moduli

Question

Sto assemblando un repository che sarà disponibile su npm. Il repository è composto da più moduli, simili a react-leaflet e react-d3. Gli sviluppatori di applicazioni includeranno moduli dal all'interno del pacchetto NPM tramite require/import, ad es .:

import { ModuleOne, ModuleTwo } from 'myNpmPackage`; 

Ho bisogno di confezionare CSS insieme a ciascuno di questi moduli, e che i CSS verranno compilati dai file Sass all'interno di ogni modulo.

dato una struttura di cartelle per myNpmPackage come:

├── src 
│ ├── ModuleOne 
│ │ ├── index.js 
│ │ ├── style.scss 
│ ├── ModuleTwo 
│ │ ├── index.js 
│ │ ├── style.scss 
├── package.json 

cosa è un buon pubblicare flusso di rendere i file .scss (compilato nel .css) a disposizione dei consumatori di myNpmPackage, senza richiedere che i consumatori in modo esplicito includono/@import/link rel="stylesheet" il CSS?

Sto usando gulp e browserify e preferisco restare con quella pipeline.

---

UPDATE: ho trovato parcelify fa alcuni di cosa ho bisogno. Aggiungo quanto segue per myNpmPackage/package.json:

"style": "src/**/*.scss", 
"transforms": [ 
    "sass-css-stream" 
] 

e aggiungi parcelify a dependencies, in modo che venga installato insieme a myNpmPackage.

I consumatori di myNpmPackage devono quindi aggiungere il seguente alla loro gulpfile:

parcelify(b, { 
    bundles: { 
     style: './build/modules.css' 
    } 
}); 

parcelify utilizzerà il "style" glob in myNpmPackage/package.json di radunare tutti i file .scss in myNpmPackage s' moduli e distribuirli in ./build/modules.css.

Questo è sempre lì, ma non è l'ideale per due motivi:

1. I file CSS di ogni modulo sono tutti inclusi nella build dell'applicazione dei consumatori, anche se non tutti i moduli sono inclusi;
2. Questa strategia richiede allo sviluppatore di applicazioni consumer di aggiungere codice al proprio gulpfile anziché "solo funzionante".

Answer 1

Here is a Webpack setup che fa esattamente quello che vi serve:

• solo importati moduli CSS sono compresi nel the build (ModuleThree non è per esempio).
• non è necessario aggiornare alcuni gulpfile.js o *.config.js, ogni modulo require its own stylesheet(s) come qualsiasi altra dipendenza.

Bonus: ModuleTwo mostra how to lazy load CSS e contiene anche un'immagine di sfondo che sarà incluso come qualsiasi dipendenza pure.

Nota: Non ho utilizzato la sintassi ES2015 ma è possibile se lo si desidera con babel-loader.

Answer 2

Dipende in parte dalla propria pipeline di sviluppo. Dopo aver creato la tua app, puoi rendere visibile tutto il tuo SCSS in CSS. Quindi, supponendo che tu abbia un singolo file CSS con tutti gli stili resi, puoi includerlo in un file JavaScript usando vari metodi all'interno dell'ecosistema di gulp, ad esempio this plugin.

function addStyleString(str) { 
    var node = document.createElement('style'); 
    node.innerHTML = str; 
    document.body.appendChild(node); 
} 

addStyleString('/* CSS File 1 */'); 

E nel tuo sorso cantiere:

var gfi = require("gulp-file-insert"); 

gulp.src('./sample.js') 
    .pipe(gfi({ 
    "/* CSS File 1 */": "path/to/main.css" 
    })) 
    .pipe(gulp.dest('./dist/')); 

Riferimento: Inject CSS stylesheet as string using Javascript