Làm thế nào để chuyển đổi tệp css khi sử dụng Webpack để tải css?

Question

Tôi sử dụng gulp để biên dịch tệp sass của tôi thành tệp css và tham chiếu tệp css trong html của tôi. Công tắc chủ đề hỗ trợ dự án. Ví dụ, tôi có 3 css file theme:

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

Tôi hiện có thể chuyển đổi css theme như thế này:

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

Bây giờ tôi muốn sử dụng webpack để tải tệp css.

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

Dường như hoạt động tốt, nhưng tôi không thể tìm cách chuyển đổi tệp css chủ đề ngay bây giờ, có ai có giải pháp không?

Answer 1

Bạn sẽ cần phải sử dụng một combination of webpacks style-loader and file-loader (ví dụ thứ hai) và sử dụng require.ensure (ví dụ thứ hai "nhập khẩu năng động") để thực hiện điều này:

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

Sau đó, một cuộc gọi như switchTheme('blue') nên làm các trick.

Và bạn có thể phải kiểm tra webpack.config.js hiện tại của mình, trong trường hợp bạn đã định cấu hình trình tải cho các tệp .css.

Answer 2

Cách tiếp cận của bạn không cần phải thay đổi. Chỉ cần sử dụng plugin Extract Text để lưu tệp CSS. Bạn sẽ cần phải thực hiện multiple entry points để tạo nhiều tệp CSS.

HOẶC

lý tưởng hơn, (cách tiếp cận tôi sẽ mất) thực hiện chuyển đổi CSS của bạn dựa trên một html hoặc cơ thể lớp khác nhau và chỉ cần thay đổi lớp. Nó sẽ không thêm nhiều chi phí, và nó sẽ là một UX lý tưởng hơn khi thay đổi chủ đề.