Come estrarre più fogli di stile del tema con il webpack?

Question

Sto cercando di rendere l'app React modificabile. Per ora i temi consistono solo di diversi insiemi di variabili sass che definiscono diversi colori di intestazione, ecc.

Dal mio punto di vista attuale lo ExtractTextPlugin sembra essere la mia migliore scommessa in quanto non voglio che i miei stili siano in linea e piuttosto separati file per tema.

Così ho creato due temi:

src/scss/themes/theme-a.scss 
src/scss/themes/theme-b.scss 

I temi importare il layout di base e gli stili comuni e sovrascrivere le variabili rilevanti.

Ma l'unico modo sono riuscito a fare webpack creare file css separati per entrambi i temi è stato quello di creare punti di ingresso distinti per ogni tema in mia webpack.prod.config:

entry: { 
    app: './src/js/init.js', 
    theme-a: './src/scss/themes/theme-a.scss', 
    theme-b: './src/scss/themes/theme-b.scss' 
}, 

Ma l'aggiunta di un nuovo punto di ingresso per ogni il nuovo tema che viene aggiunto si sente sbagliato e immagino ci debba essere un modo migliore?

Answer 1

, ecco la soluzione:

npm i --save-dev file-loader 

Nella sezione loaders, aggiungere questo:

{ 
    test: /themes\/.+\.scss$/, 
    loader: "file-loader?name=./compiled-themes/css/[name].css!css!sass" 
}, 

Ci possono essere più file SCSS, in tal caso ci deve essere un'altra sezione che li impacchetta come al solito, ma salta i temi:

{ 
    test: /\.scss$/, 
    exclude: /themes\/.+\.scss$/, 
    loader: "css!sass" 
}, 

Il caricatore di file scrive file per nomefile, hash a estensione nd in modo da poter conservare il nome.

Nota la parte name=./compiled-themes/css/[name].css, in cui le voci [] sono sostituite.

https://github.com/webpack/file-loader

Answer 2

Per evitare di dover aggiungere manualmente i temi, una possibile soluzione consiste nel creare una funzione che legge i contenuti della cartella temi e aggiungere automaticamente una voce per ciascun file * .scss.

Qualcosa sulla falsariga di questo:

function getThemes(themePath) { 
    var themes = {}; 
    fs.readdirSync(themePath).forEach(function(fileName) { 
     var fileNameWithPath = path.join(themePath, fileName); 

     var stat = fs.lstatSync(fileNameWithPath); 
     if (stat.isDirectory()) return; 
     if (!/\.scss$/.test(fileName)) return; 

     var nameWithoutExt = path.basename(fileName, '.scss'); 
     themes[nameWithoutExt] = fileNameWithPath; 
    }); 

    return themes; 
} 

var themes = getThemes('./src/scss/themes'); 

var config= { 
    entry: _.merge({ app: './src/js/init.js' }, themes), 
    // rest of options 
}; 

Ciò richiederà il riavvio del dev-server o re-run a costruire webpack quando l'aggiunta di file nuovo tema, però, ma almeno non avrà per toccare la tua configurazione del webpack.