preact-cliでCSS Modulesを任意フォルダで使用する

preact-cli は webpack をラッピングしています。

preact.config.js を作成する事によりカスタマイズが可能です。
https://github.com/developit/preact-cli/wiki/Config-Recipes

また preact-cli のCSS規則で components と routes 以下のファイルは <div class={style.header}>hoge</div> のような記法が使用できるCSS Modulesで
それ以外は import 'sanitize.css' のようにCSSが読み込めるようになっています。

詳しくはコードをご確認ください。
https://github.com/developit/preact-cli/blob/1e54b822b561206ce8ea1121f4ac1877cf4e23f3/src/lib/webpack/webpack-base-config.js

そこで components と routes 以外のフォルダでもCSS Modulesで読み込まれるように試してみました。

export default function(config, env, helpers) {  
  const staticLoads = [
    source('sanitize.css'),
    source('style/index.css')
  ];

  const loaderA = config.module.loaders[4];
  const loaderB = config.module.loaders[5];
  
  delete(config.module.loaders[4].include);
  delete(config.module.loaders[5].exclude);

  config.module.loaders[4].exclude = staticLoads;
  config.module.loaders[5].include = staticLoads;
}

このように webpack の設定を上書きする事で components と routes 以外でもCSS Modulesが使えるようになります。