Webpackを使用してCSSを読み込むときにCSSファイルを切り替えるにはどうすればよいですか？

Question

gssを使用して、私のsassファイルをcssファイルにコンパイルし、hss内のcssファイルを参照します。プロジェクトはテーマスイッチをサポートしています。例えば、私は3つのCSSのテーマファイルを持っている：

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

私は現在、このようなテーマのCSS切り替えることができます。私は今

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

をwebpackを使ってCSSファイルをロードしたい

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

それがうまく機能しているようだが、私は今、テーマのCSSファイルを切り替える方法を見つけることができない、誰もが解決策を持っているのでしょうか？

Answer 1

あなたはcombination of webpacks style-loader and file-loader（第2例）を使用し、require.ensure（第二の例「ダイナミック輸入」）を使用し、これを達成するためにする必要があります：

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 + '"'); 
    } 
} 

その後switchTheme('blue')のような呼び出しがトリックを行う必要があります。

.cssファイル用のローダーを既に設定している場合は、現在のwebpack.config.jsを確認する必要があります。

Answer 2

あなたのアプローチは変更する必要はありません。 Extract Textプラグインを使用してCSSファイルを保存してください。複数のCSSファイルを作成するには、multiple entry pointsを作成する必要があります。

以上の理想的

、（私はかかるだろうなアプローチは）異なるHTMLまたは身体クラスに基づいて、あなたのCSSスイッチを作り、ちょうどクラスを変更します。多くのオーバーヘッドを追加することはなく、テーマを変更するときにはより理想的なUXになります。