Jak zmienić plik css podczas korzystania z WebPacka w celu załadowania css?

Question

Używam gulp do kompilacji mojego pliku sass do plików css i odwołuję się do pliku css w moim html. Projekt wspiera zmianę tematu. Na przykład, mam pliki temat 3 CSS:

• red.css
• yellow.css
• blue.css

mogę obecnie przełączyć css motywu tak:

var styleDom = $('#theme-style'); 
var newHref = 'styles/themes/' + themeName + '.css'; 
if (styleDom.attr('href') !== newHref) { 
    styleDom.attr('href', newHref); 
} 

Teraz chcesz użyć webpacka do załadowania pliku css.

require('styles/themes/red.css'); 

Wydaje się, że działa dobrze, ale nie mogę znaleźć sposobu na przełączenie pliku css tematu teraz, czy ktoś ma rozwiązanie?

Answer 1

Musisz użyć combination of webpacks style-loader and file-loader (drugi przykład) i używać require.ensure (drugi przykład „przywozu dynamiczne”), aby osiągnąć ten cel:

function switchTheme(name) { 
    // Remove the current theme stylesheet 
    // Note: it is important that your theme css always is the last 
    // <link/> tag within the <head/> 
    $('head link[rel="stylesheet"]').last().remove(); 

    // Since webpack needs all filePaths at build-time 
    // you can't dynamically build the filePath 
    switch(name) { 
     case 'red': 
      // With require.ensure, it is possible to tell webpack 
      // to only load the module (css) when require is actually called 
      return require.ensure([], function() { 
       require('style-loader/url!file-loader!styles/themes/red.css'); 
      }); 
     case 'yellow': 
      return require.ensure([], function() { 
       require('style-loader/url!file-loader!styles/themes/yellow.css'); 
      }); 
     case 'blue': 
      return require.ensure([], function() { 
       require('style-loader/url!file-loader!styles/themes/blue.css'); 
      }); 
     default: 
      throw new Error('Unknown theme "' + name + '"'); 
    } 
} 

Następnie wywołanie jak switchTheme('blue') powinno załatwić sprawę.

Może być konieczne sprawdzenie bieżącego numeru webpack.config.js, na wypadek gdyby już skonfigurowano program ładujący dla plików .css.

Answer 2

Twoje podejście nie musi się zmieniać. Wystarczy użyć wtyczki Extract Text, aby zapisać pliki CSS. Musisz utworzyć multiple entry points, aby utworzyć wiele plików CSS.

LUB

Więcej idealnie, (podejście wziąłbym) dokonać przełącznik CSS na podstawie innego html lub ciała klasy i po prostu zmienić klasę. Nie spowoduje to zwiększenia nakładu pracy, a przy zmianie motywów będzie bardziej idealnym UX.