Разделите таблицу стилей на несколько файлов с помощью Webpack

Question

Мы используем Webpack в качестве нашей системы сборки и экспериментируем с расщеплением нашей одиночной большой таблицы стилей на несколько фрагментов.

В настоящее время мы делаем это, создавая отдельные точки входа, но это дает нам проблему; что мы должны дублировать много импорта. Это приводит к фрагментированному, подобранному спагетти графику зависимости и теряет любой общий контекст, который может понадобиться.

В идеале было бы здорово придерживаться единственной точки входа, составляющей одну большую таблицу стилей, но затем разделить ее.

Например дал этот сингл точек входа main.scss:

// start:critical.css 
@import "shared/normalize"; 
@import "shared/grid"; 
@import "shared/layout"; 
@import "shared/typography"; 
// end:critical.css 

@import "shared/component/tabs"; 
@import "shared/component/modal"; 
@import "app/content-list"; 
@import "app/content"; 
@import "gallery"; 

Это составляет 2 таблицы стилей; critical.css и main.css

Answer 1

Чтобы решить эту проблему, мы закончили реализацию простого плагина, который расщепляет вывод перед записью файлов:

function() { 
    const extractor = /\/\*!\s?start:([\w_-]+\.css)\s?\*\/[\S\s]+\/\*!\s?end:\1\s?\*\//g; 
    const target = /start:([\w_-]+\.css)/; 

    this.plugin('emit', (compilation, callback) => { 
     const css = Object.keys(compilation.assets).filter(filename => /\.css$/.test(filename)); 

     css.forEach(filename => { 
      const source = compilation.assets[filename].source(); 
      const blocks = source.match(extractor); 

      blocks && blocks.forEach(block => { 
       const name = block.match(target).pop(); 

       // add a new output file 
       compilation.assets[`./public/${name}`] = { 
        source:() => block, 
        size:() => block.length 
       }; 
      }); 

      // remove blocks from the parent 
      compilation.assets[filename].source =() => source.replace(extractor, ''); 
     }); 

     callback(); 
    }); 
}